tài liệu công nghệ web và ứng dụng

ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN
College of Information Technology
Địa chỉ: 48B Cao Thắng – Thành phố Đà Nẵng
Website:
Email:
















Tài liệu
CÔNG NGHỆ WEB VÀ ỨNG DỤNG

Đà Nẵng, 01/2008
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 2
MỤC LỤC

CHƯƠNG 1: TỔNG QUAN 6
1.1 Một số khái niệm 6
1.1.1 Internet: 6
1.1.2 World Wide Web 7
1.1.3 ISP 7
1.1.4 URL 8
1.1.5 DNS 9
1.1.6 Firewall 9
1.2 Tổng quan về một hệ thống Web 9
1.2.1 Mô hình một hệ thống Web nói chung: 9
1.2.2 Nguyên tắc hoạt động: 10
CHƯƠNG 2: NGÔN NGỮ HTML 12
2.1 Giới thiệu HTML 12
2.2 Trình soạn thảo HTML 12
2.2.1 Microsoft FrontPage 12
2.2.2 Macromedia Dreamweaver MX 2004 13
2.3 Tạo trang HTML đầu tiên 13
2.4 Cấu trúc trang HTML 16
2.4.1 Thẻ và cấu trúc thẻ 17
2.4.2 Màu sắc trong thiết kế web 20

2.4.3 Thẻ chú thích 21
2.4.4 Các thẻ định dạng trình bày 22
2.4.5 Form 29
2.4.6 Bảng 43
2.4.7 Danh sách 48
2.4.8 Các ký tự đặc biệt 50
2.4.9 Âm thanh, video, flash và applet 51
2.4.10 Frame 52
2.4.11 Một số thẻ meta thông dụng 54
2.4.12 Thẻ DOCTYPE 54
2.5 Những lưu ý 55
2.5.1 Tạo chuẩn đánh dấu thẻ và tuân thủ nó 55
2.6 Giới thiệu về XHTML 56
CHƯƠNG 3: CASCADING STYLE SHEETS (CSS) 57
3.1 Các loại CSS 57
3.2 CSS trong dòng 57
CHƯƠNG 4: KỊCH BẢN TRÌNH KHÁCH 58
4.1 Nhúng javascript vào file html 58
4.1.1 Sử dụng thẻ SCRIPT 58
4.1.2 Sử dụng một file nguồn JavaScript 59
4.1.3 Thẻ <NOSCRIPT> và </NOSCRIPT> 59
4.2 Hiển thị một dòng văn bản 60
4.3 Ghi chú mã lệnh 61
4.4 Giao tiếp với người sử dụng 61
4.5 Biến trong JavaScript 62
4.5.1 Biến và phân loại biến 62
4.5.2 Kiểu dữ liệu 63
4.5.3 Kiểu nguyên (Interger) 63
4.5.4 Kiểu dấu phẩy động (Floating Point) 63
4.5.5 Kiểu logic (Boolean) 64

4.5.6 Kiểu chuỗi (String) 64
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 3
4.6 Biểu thức 64
4.7 Toán tử (Operator) 64
4.7.1 Gán 64
4.7.2 So sánh 65
4.7.3 Số học 65
4.7.4 Chuỗi 65
4.7.5 Logic 65
4.7.6 Bitwise 65
4.8 Lệnh 66
4.8.1 Lệnh điều kiện: 66
4.8.2 Lệnh lặp 67
4.8.3 while 68
4.8.4 Switch 68
4.8.5 Break 68
4.8.6 continue 68
4.9 Hàm (Functions) 69
4.10 Các hàm có sẵn 70
4.10.1 eval 70
4.10.2 parseInt 71
4.10.3 parseFloat 72
4.10.4 escape và unescape 72
4.11 Biểu thức quy tắc 73
4.12 Mảng (ARRAY) 73
4.12.1 Tạo một mảng trống 73
4.12.2 Xác định chiều dài ban đầu của mảng 74
4.12.3 Tạo và khởi tạo mảng trong cùng một dòng lệnh 75
4.12.4 Kích thước mảng length 75

4.12.5 Các chức năng của đối tượng Array 75
4.13 Sự kiện 76
4.14 Các đối tượng trong JavaScript 79
4.15 Đối tượng Navigator 81
4.16 Đối tượng window 81
4.17 Đối tượng location 84
4.18 Đối tượng frame 84
4.19 Đối tượng document 84
4.20 Đối tượng anchors 85
4.21 Đối tượng forms 85
4.22 Đối tượng history 86
4.23 Đối tượng links 86
4.24 Đối tượng math 87
4.25 Đối tượng date 88
4.26 Đối tượng string 89
4.27 Các phần tử của đối tượng form 90
4.27.1 Phần tử button 91
4.27.2 Phần tử checkbox 92
4.27.3 Phần tử File Upload 93
4.27.4 Phần tử hidden 93
4.27.5 Phần tử Password 93
4.27.6 Phần tử radio 94
4.27.7 Phần tử reset 95
4.27.8 Phần tử select 96
4.27.9 Phần tử submit 97
4.27.10 Phần tử Text 97
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 4
4.27.11 Phần tử Textarea 98
4.27.12 Mảng elements[] 99

4.27.13 Mảng form[] 99
4.28 Xem lại các lệnh và mở rộng 99
CHƯƠNG 5: KỊCH BẢN TRÌNH CHỦ 102
5.1 Giới thiệu ngôn ngữ lập trình web động 102
5.2 Cài đặt và chạy ứng dụng ASP 103
5.2.1 Web Server IIS 104
5.2.2 Cấu hình cho Website trên IIS 105
5.2.3 Viết các file ASP 107
5.2.4 Dùng trình duyệt truy cập website 107
5.3 Tóm tắt các cú pháp VBScript 109
5.3.1 Response.write 109
5.3.2 Biến 109
5.3.3 Mảng 110
5.3.4 Ghép chuỗi 110
5.3.5 Hàm có sẵn 110
5.3.6 Các hàm chuyển đổi kiểu 110
5.3.7 Các hàm format 110
5.3.8 Các hàm toán học 111
5.3.9 Các hàm thao tác với chuỗi 111
5.3.10 Các hàm ngày tháng 111
5.3.11 Các hàm kiểm tra 112
5.3.12 Cấu trúc điều kiện if 112
5.3.13 Cấu trúc lựa chọn select 113
5.3.14 Cấu trúc lặp tuần tự For … Next 114
5.3.15 Cấu trúc lặp DO WHILE….LOOP 115
5.3.16 Cấu trúc lặp WHILE….WEND 115
5.3.17 Cấu trúc lặp DO….LOOP UNTIL 115
5.3.18 Điều kiện and ,or, not 116
5.3.19 Thủ tục và hàm người dùng 116
5.3.20 Thủ tục 116

5.3.21 Hàm 117
5.3.22 Sử dụng #include 118
5.4 Các đối tượng căn bản 118
5.4.1 Đối tượng Request 118
5.4.2 Request.QueryString 118
5.4.3 Request.Form 119
5.4.4 Response 119
5.4.5 Response.Write 119
5.4.6 Response.Redirect 119
5.4.7 Response.End 119
5.4.8 Đối tượng Session 119
5.4.9 Đối tượng Application 120
5.4.10 File Global.asa 121
5.4.11 Đối tượng Dictionary 122
5.4.12 Đối tượng Server 122
5.5 Sử dụng Database với ASP 123
5.5.1 Các cú pháp căn bản để truy xuất dữ liệu từ DB 123
5.5.2 Đối tượng Connection 124
5.5.3 Đối tượng Recordset 124
5.5.4 Thêm, sửa, xóa dữ liệu trong DB: 126
5.6 Sử dụng tiếng Việt trong ASP 127
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 5
5.6.1 Bảng mã Unicode 127
5.6.2 Mã hóa UTF-8 127
5.6.3 CodePage và Charset 127
CHƯƠNG 6: PHỤ LỤC - VBSCRIPT REFERENCE 129
6.1 Statements and Keywords 129
6.2 Operators 129
6.3 VBScript Functions 129

6.3.1 Type Checking Functions 129
6.3.2 Typecasting Functions 130
6.3.3 Formatting Functions 130
6.3.4 Math Functions 131
6.3.5 Date Functions 131
6.3.6 String Functions 132
6.3.7 Other functions 134
6.3.8 Control Structures 134

Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 6
CHƯƠNG 1: TỔNG QUAN
1.1 Một số khái niệm
1.1.1 Internet:
 Internet là một hệ thống thông tin toàn cầu bao gồm các mạng máy tính được liên kết
với nhau (a network of networks) với mục đích trao đổi và chia sẻ thông tin.
Internet là mạng toàn cầu liên kết các máy tính thông qua hệ thống đường điện thoại và
cáp quang. Một số máy tính được nối liên tục vào Internet trong khi các máy khác chỉ ghé
thăm một đôi lúc. Những máy tính nối thường xuyên vào mạng là những máy chứa vô số
thông tin mà những người dùng mạng khác có thể truy cập.
 Mạng máy tính:
Mạng máy tính là tập hợp nhiều máy tính điện tử và các thiết bị đầu cuối được kết nối
với nhau bằng các thiết bị liên lạc nhằm trao đổi thông tin, cùng chia sẻ phần cứng, phần
mềm và dữ liệu với nhau.
Mạng máy tính là một số máy tính được kết nối với nhau. Ở đây không đề cập đến số
lượng các máy tính trong mạng. Hai máy tính được nối với nhau bằng m
ột sợi dây mạng. Đó
là một mạng máy tính. Các máy tính trong quầy internet đều được nối với một máy chủ (để dễ
dàng quản lý, tính tiền). Đó là một mạng máy tính. Các máy tính của trường CĐ CNTT, của
trường BK, KT, SP, NN được kết nối với nhau, tạo thành mạng máy tính của Đại học Đà

Nẵng. Và khi các mạng máy tính này lại kết nối với nhau ở quy mô lớn, tạo thành hệ thống
bao gồm hàng ngàn mạng máy tính nh
ỏ hơn của các doanh nghiệp, của các viện nghiên cứu
và các trường đại học, của người dùng cá nhân, và các chính phủ trên toàn cầu – đó là
internet.

- So sánh mạng máy tính – mạng truyền hình:
Các mạng truyền hình
gửi thông tin tương tự đến mọi trạm vào cùng lúc. Sự giao tiếp
này là một chiều, nghĩa là không có sự tương tác hai chiều.
Trong mạng máy tính
, mỗi thông điệp thường được dẫn đến một máy tính cụ thể nào
đó. Khác với mạng truyền hình, các mạng máy tính luôn hai chiều sao cho khi máy tính A gửi
thông điệp đến máy tính B thì B có thể trả lời lại cho A.
- Internet cung cấp một khối lượng thông tin và dịch vụ khổng lồ. Phần chủ yếu nhất của
mạng Internet là World Wide Web.
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 7
 Các dịch vụ trên Internet:
o Thư điện tử (E-mail)
o Trò chuyện trực tuyến (Chat)
o Máy truy tìm dữ liệu (Search engine)
o Các dịch vụ thương mại và chuyển ngân
o Các dịch vụ về y tế (Chữa bệnh từ xa)
o Các dịch vụ về giáo dục (Các lớp học ảo)
o …
- Đại đa số các dịch vụ trên internet đều miễn phí.
- Các cách thức thông thường để truy cập internet là quay số
, băng rộng, không dây, vệ
tinh và qua điện thoại cầm tay.

1.1.2 World Wide Web
 - World Wide Web, gọi tắt là Web hoặc WWW, là một không gian thông tin toàn cầu
mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet.
Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet.
Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet, chẳng hạn như dị
ch vụ
thư điện tử.
Sở dĩ Web trở nên phổ biến vì nó cung cấp cho người sử dụng khả năng truy cập dễ
dàng từ đó người sử dụng có thể khai thác các thông tin trên Net dưới dạng văn bản, hình
ảnh thậm chí cả âm thanh và video. Vì thế, Web đôi khi còn được gọi là đa phương tiện của
mạng Internet.
Để dùng Web, người sử dụng phải có trình duyệt Web như Netscape hoặc Microsoft
Internet Explorer. Trình duyệt Web là một ứng dụng tương thích với máy tính của bạn, cho
phép bạn nhìn thấy các trang Web trên màn hình máy tính.
Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn bản
(hypertext), đặt tại các máy tính trong mạng Internet. Người dùng phải sử dụng trình duyệt
web (web browser) để xem siêu văn bản. Người dùng có thể theo các liên kết siêu văn bản
(hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phả
n hồi theo
máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được
gọi là duyệt Web. Quá trình này cho phép người dùng có thể lướt các trang web để lấy thông
tin. Tuy nhiên độ chính xác và chứng thực của thông tin không được đảm bảo.
Phân biệt Internet và WWW: Internet và WWW không đồng nghĩa. Internet là một tập
hợp các mạng máy tính kết nối với nhau bằng dây đồng, cáp quang, v.v ; còn WWW, hay
Web, là một tập hợp các tài liệu liên kết với nhau bằng các siêu liên kết (hyperlink) và các địa
chỉ URL, và nó có thể được truy nhập bằng cách sử dụng Internet.
 Các trình duyệt web thông dụng:
o Internet Explorer có sẵn trong Microsoft Windows, của Microsoft
o Mozilla và Mozilla Firefox của Tập đoàn Mozilla
o Netscape Browser của Netscape

o
Opera của Opera Software
o
Safari trong Mac OS X, của Apple Computer
o Maxthon của MySoft Technology
o Avant Browser của Avant Force.
1.1.3 ISP
Internet Service Providers - Các nhà Cung cấp Dịch vụ Internet
ISP cung cấp các kết nối vào Internet cho người dùng ở nhà hay các doanh nghiệp. Có
ISP cục bộ, vùng, quốc gia và toàn cầu. Trong hầu hết trường hợp, ISP cục bộ đều nối vào
ISP vùng, mà đến lượt mình ISP vùng lại nối vào ISP quốc gia hay toàn cầu. Tuy nhiên, cũng
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 8
có thể bỏ qua trật tự nầy để nối trực tiếp vào các điểm chuyển mạch của Internet. Nếu bạn
nghĩ Internet như một đường ống dữ liệu lớn với nhiều ống dữ liệu nhỏ hơn được nối với nó,
khi đó bạn có thể nghĩ được là ISP cục bộ như người gác cổng để vào Internet.
Nhà cung cấp dịch vụ internet là mộ
t công ty với những máy tính siêu nhanh thường
xuyên nối vào Internet thông qua một đường truyền tốc độ cao. Công ty này sẽ bán cho bạn
quyền kết nối vào mạng và sử dụng một phần đường truyền của họ để đến với toàn mạng
internet. Khi đã kết nối vào Internet bạn có thể truy nhập thông tin của mọi máy tính trên
mạng. Bạn cũng có thể cung cấp những thông tin của riêng bạn để mọi người có thể truy
nhậ
p.
Để máy tính của bạn liên kết được với máy của ISP, bạn cần một modem, thiết bị dùng
để chuyển từ tín hiệu số trong máy tính sang tín hiệu tương tự của đường điện thoại, và bạn
cần một phần mềm giúp cho máy của bạn giao tiếp với những máy khác.
Các Nhà cung cấp dịch vụ Internet (IPS) tại Việt Nam gồm Tập đoàn Bưu chính Viễn
thông Việt Nam (VNPT), Tổng Công ty Viễn thông Quân độ
i (Viettel), Công ty Viễn thông Điện

lực (EVN Telecom), Công ty Cổ phần Bưu chính Viễn thông Sài Gòn (SPT), Công ty Netnam
và một số công ty khác.
Việt Nam chính thức kết nối vào Internet từ ngày 19/11/1997.
1.1.4 URL
- Tài nguyên (Resource) là một đối tượng trên internet nằm trên máy chủ. Đối tượng
này chính là các thư mục, các tập tin khác nhau, gồm tập tin văn bản, đồ họa, video và âm
thanh.
Vậy làm sao để truy xuất được đến các đối tượng này?
Để truy xuất được các đối tượng (các tài nguyên), cần phải biết
địa chỉ của đối tượng
đó. Đó chính là URL. Xét ví dụ sau.
- Ví dụ về một URL:
:80/diemthi/timkiem.aspx?sobaodanh=1234
\__/ \__________/ \_/\_________________/ \____________/
| | | | |
GT MPV C ĐD TV
Ở đây, GT là giao thức, MPV là máy phục vụ, C là cổng, ĐD là đường dẫn, TV là truy
vấn.
- Một URL gồm có nhiều phần:
o Tên giao thức (ví dụ: http, ftp)
o Tên miền (ví dụ: cit.udn.vn)
o Chỉ định thêm cổng (có thể không cần)
o Đường dẫn tuyệt đối trên máy phục vụ của tài nguyên (vídụ: thumuc/trang)
o Các truy vấn (có thể không cần)
o Chỉ định mục con (có thể không cần)
- URL, viết tắt của Uniform Resource Locator
, được dùng để tham chiếu tới tài nguyên
trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác
nhau được tham chiếu tới bằng địa chỉ, chính là URL.
While it is hard to believe, given the millions, perhaps billions, of them out there, every

document and resource on the Internet has a unique address, known as its uniform resource
locator (URL; commonly pronounced "you-are-ell"). A URL consists of the document's name
preceded by the hierarchy of directory names in which the file is stored (pathname), the
Internet domain name of the server that hosts the file, and the software and manner by which
the browser and the document's host server communicate to exchange the document
(protocol ):
protocol://server_domain_name/pathname
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 9
Here are some sample URLs:



The first example is an absolute or complete URL. It includes every part of the URL
format: protocol, server, and the pathname of the document. While absolute URLs leave
nothing to the imagination, they can lead to big headaches when you move documents to
another directory or server. Fortunately, browsers also let you use relative URLs and
automatically fill in any missing portions with respective parts from the current document's
base URL. The second example is the simplest relative URL of all; with it, the browser
assumes that the price_list.html document is located on the same server, in the same
directory as the current document, and uses the same network protocol.
Relative URLs are also useful if you don't know a directory or document's name. The
third URL example, for instance, points to kumquat.com's web home page. It leaves it up to
the kumquat server to decide what file to send along. Typically, the server delivers the first file
in the directory, one named index.html, or simply a listing of the directory's contents.
Although appearances may deceive, the last FTP example URL actually is absolute; it
points directly at the contents of the /pub directory.
L Các giới hạn của URL?
Định dạng URL chỉ chấp nhận các ký tự sau trong chuỗi URL:
o Ký tự a đến z

o Chữ số từ 0 đến 9
o Các dấu hiệu $ - + ! * ‘ ( ) ,
o Các ký tự đặc biệt được dành riêng cho các mục đích đặc biệt: ; / ? : @ = &
Không một ký tự nào khác được phép xuất hiện trong URL. Và các ký tự đặc biệt chỉ
được dngf với vai trò riêng của chúng. Các ký tự nằm ngoài các quy tắc này phải được viết
một cách
đặc biệt, bằng cách mã hóa (chẳng hạn sử dụng hàm escape và unescape trong
JavaScript).
1.1.5 DNS

1.1.6 Firewall

1.2 Tổng quan về một hệ thống Web
1.2.1 Mô hình một hệ thống Web nói chung:
Một hệ thống Web là một hệ thống cung cấp thông tin trên mạng Internet thông qua các
thành phần Máy chủ, trình duyệt và nội dung thông tin.

Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 10

1.2.2 Nguyên tắc hoạt động:
- Nguyên tắc hoạt động của phần lớn các ứng
dụng web được diễn ra như sau:
1. Người sử dụng sẽ thực hiện lời triệu gọi
(request) đến máy chủ Web. Cách đơn giản nhất của hành động này là người sử dụng dung
trình duyệt web gõ địa chỉ tên miền cần truy cập (
) gửi yêu cầu đến máy chủ
web.
2. Máy chủ Web sẽ xem xét và thực hiện các yêu cầu từ phía trình duyệt của người
dùng, chẳng hạn như lấy các giá trị truy vấn, thực hiện các phép toán, truy xuất cơ sở dữ

liệu…
3. Máy chủ Web sau khi tính toán xong sẽ đưa ra một trang kết quả “thuần HTML” để
trả lại cho phía trình duyệt máy khách.
4. Tại máy khách, trình duyệt sẽ đọc trang HTML nhận được và hiển thị ra trên màn
hình.
- Người dung sẽ trở nên trong suốt với những gì diễn ra đằng sau trình duyệt web. Họ
không cần biết máy chủ phải thực hiện những phép tính gì, có phải kết nối cơ sơ dữ liệu
không… Người dùng chỉ cần thấy trên trình duyệt là một trang web sống động, với những
thông tin cần thiết, và tất nhiên, là càng nhanh càng tốt.
- Trong trường hợp Web tĩnh thì máy chủ web sẽ lấy thông tin lưu sẵn trên máy chủ
dạ
ng thư mục, files và gửi lại theo yêu cầu của máy khách.
- Trường hợp web động phải dụng các ngôn ngữ lập trình web như ASP, PHP, JSP, …
để kết nối và khai thác cơ sở dữ liệu.
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 11




Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 12
CHƯƠNG 2: NGÔN NGỮ HTML
2.1 Giới thiệu HTML
HTML (hay Hypertext Markup Language-Ngôn ngữ liên kết siêu văn bản) là ngôn ngữ
đánh dấu chuẩn dùng lập trình các tài liệu World Wide Web, tài liệu là các tập tin văn bản đơn
giản. Ngôn ngữ HTML dùng các thẻ hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Web
browsers) cách hiển thị các thành phần của trang như text và graphics ,và đáp lại những thao
tác của người dùng bởi các thao tác ấn phím và nhắp chuột. Hầu hết các Web browser, đặc
biệt là Microsoft Internet Explorer và Netscape Navigator, nhận biết các thẻ của HTML vượt

xa những chuẩn HTML đặt ra.
Trang HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào
mạng Internet. Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị cho chương trình về
cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy. Các file này thường được truyền đi
trên mạng internet thông qua giao thức mạng HTTP, và sau đó thì phần HTML của chúng sẽ
được hiển thị thông qua một trình duyệt web, phần m
ềm đọc email , hay một thiết bị không
dây như một chiếc điện thoại di động.
2.2 Trình soạn thảo HTML
Bạn có thể soạn thảo mã lệnh HTML trên bất kỳ trình soạn thảo văn bản nào, như
notepad, word, WordPad… Chúng ta sẽ tìm hiểu một số công cụ soạn thảo HTML hữu ích:
2.2.1 Microsoft FrontPage
Microsoft đã phát triển một công cụ soạn thảo HTML khá phổ biến với tên gọi
FrontPage. FrontPage cung cấp cho các nhà phát triển web một số công cụ về JavaScript hỗ
trợ trong việc tạo ra một website tương tác. FrontPage đã từng được thừa nhận là công cụ

phát triển HTML và JavaScript hàng đầu.

Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 13
FrontPage còn chứa nhiều đặc điểm hữu dụng, bao gồm những khả năng như thiết kế
một cấu trúc website trước khi tạo bất kỳ một trang web nào, cấu hình tính an toàn cho
website, thiết lập kiểu trên toàn site và tạo ra các hình ảnh biểu ngữ (banner) tùy biến.
2.2.2 Macromedia Dreamweaver MX 2004
Macromedia Dreamweaver MX 2004 là một trình soạn thảo HTML và JavaScript rất phổ
biến trong cộng đồng các nhà phát triển web chuyên nghiệp. Nó cung cấp nhiều đặc điểm,
bao gồm khả n
ăng soạn thảo hầu hết các ngôn ngữ lập trình phía máy chủ phổ biến như
ASP, JSP và PHP, cung cấp một số thành phần JavaScript được xây dựng sẵn, tích hợp tốt
với cơ sở dữ liệu và tuân thủ các chuẩn như HTML và XML.

Nếu bạn đang bắt đầu học HTML, tốt hơn hết, hãy sử dụng Notepad.
2.3 Tạo trang HTML đầu tiên
Bạn hãy cùng thử tạo một trang HTML đầu tiên với sự trợ giúp của notepad. Bạn nên
có một thư mục (folder) để chứa các ví dụ mà bạn tạo ra.
 Bước 1: Tạo mới 1 file Text document

đặt tên là vidu1.htm


Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 14
 Bước 2: Mở vidu1.htm bằng chương trình Notepad



 Bước 3: Nhập vào đoạn mã HTML như sau và lưu lại:

<html>
<head>
<title>Hello</title>
</head>
<body>
Đây là trang web đầu tiên của tôi.
</body>
</html>

 Bước 4: Mở file vidu1.htm để xem kết quả

Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 15

L Có thể bạn sẽ gặp phải thông báo rằng các ký tự mà bạn sử dụng là Unicode
(các ký tự Tiếng Việt trong ví dụ này), trong khi file vidu1.htm được lưu với mã
ANSI.

Nếu bạn không có điều chỉnh gì, thì một số chữ trong Tiếng Việt sẽ không hiển thị đúng,
như sau:

L Trong trường hợp này, bạn hãy chọn Menu File  Save As, trên hộp thoại
Save As chọn Encoding là UTF-8. Lưu lại.
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 16

 Bạn hãy làm các bước tương tự với những ví dụ sau này.
2.4 Cấu trúc trang HTML
Một tài liệu HTML gồm hai phần riêng biệt, phần đầu (head) và phần thân (body). Phần
đầu chứa đựng những thông tin về tài liệu và không được hiển thị lên màn hình. Phần thân
thì chứa đựng mọi thứ được trình bày lên màn hình như là một phần của trang Web.

Ví dụ 2.2-1
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
Thân trang web
</body>
</html>
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 17

2.4.1 Thẻ và cấu trúc thẻ
Như vậy, một trang HTML bao gồm nội dung trang và các thẻ quy định cách hiển thị.
Khi trình duyệt (web browser) hiển thị nội dung 1 trang web nó sẽ tìm kiếm trong đó
những đoạn mã đặc biệt là các thẻ được đánh dấu bởi ký hiệu < và >, và căn cứ vào đó để
thể hiện. Cú pháp tổng quát của 1 thẻ:
<tên_thẻ thuộc_tính_1=giá_trị_1 thuộc_tính_2=giá_trị_2 >Văn bản </tên_thẻ>
hoặc đơn giản hơn là:
<tên_thẻ>Chuỗi văn bản</tên_thẻ>
Phần thẻ là một mã xác định hiệu ứng mà bạn yêu cầu. Ví dụ, cho thẻ nét đậm là <B>.
Cho nên nếu bạn muốn câu “Trường Cao đẳng Công nghệ Thông tin” xuất hiện theo kiểu
chữ đậm (bold), bạn phải đưa dòng sau đây vào tài liệu của mình:

<b>Trường Cao đẳng Công nghệ Thông tin</b>.
 Ví dụ:
Ví dụ 2.2.1-1
<html>
<head>
<title>Ví dụ</title>
</head>
<body>
Chữ thường

<b>Chữ đậm</b>
</body>
</html>

 Kết quả:


Thẻ đầu tiên (<b>) báo cho trình duyệt (browser) hiển thị tất cả phần văn bản tiếp theo

bằng phông chữ đậm, liên tục cho đến thẻ </b>. Dấu gạch chéo (/) xác định đó là thẻ kết
thúc, và báo cho trình duyệt ngưng hiệu ứng đó. HTML có nhiều thẻ dùng cho nhiều hiệu ứng
khác, bao gồm chữ nghiêng (italic), dấu đoạn văn bản (paragraph), tiêu đề, tên trang, liệt kê,
liên kết, và nhiều thứ nữa.
 Vì sao trên trình duyệt không xuống dòng như trong mã nguồn?
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 18
 Trình duyệt sẽ bỏ qua những ký tự khoảng trắng, ký tự tab, và dấu xuống dòng dư
thừa trong tập tin HTML của bạn. Vì vậy, để hiển thị văn bản ở một dòng mới, bạn
hãy thêm vào thẻ xuống dòng là <br>.
Mỗi thẻ đều có tên thẻ, đôi khi được bổ sung thêm một danh sách tùy chọn các thuộc
tính, tất cả được đặt giữa dấu < và dấu >. Thẻ đơ
n giản nhất là các thẻ chỉ chứa tên thẻ, ví
dụ như thẻ <head> hay thẻ <b>. Những thẻ phức tạp hơn chứa một hoặc nhiều thuộc tính,
quy định cho tính chất của thẻ đó.
Ví dụ:
<font color=red size=14>Đoạn văn màu đỏ, cỡ chữ 14</font>
Tên thẻ: font
Thuộc tính: color (màu sắc) và size (cỡ chữ)
Ví dụ 2.2.1-2
<html>
<head>
<title>Ví dụ</title>
</head>
<body>
Chữ thường

<font color=red size=14>Đoạn văn màu đỏ, cỡ chữ 14</font>
</body>
</html>

L Trên thực tế, khi dùng định dạng HTML thuần túy, thay vì CSS, kích thước
phông chữ HTML được thay đổi từ 1 đến 7 với 1 là nhỏ nhất và 7 là lớn nhất.
Nếu bạn đặt kích thước lớn hơn 7, trình duyệt sẽ tự động hiểu là 7 (lớn nhất)
Theo tiêu chuẩn của ngôn ngữ HTML, thẻ và các thuộc tính sẽ không có sự phân biệt
chữ hoa và chữ thường. Điều đó có nghĩa là không có sự khác nhau về kết qu
ả khi sử dụng
một trong các thẻ sau: <head>, <Head>, <HEAD>, hay thậm chí <HeAd>, những thẻ này là
tương đương nhau. Tuy nhiên, bạn nên sử dụng toàn bộ chữ thường trong thẻ HTML một
cách nhất quán vì đó là điều bắt buộc trong chuẩn XHTML.
L Bạn nên tạo cho mình thói quen tuân theo các chuẩn để trang web của mình có
thể hoạt động tốt nhất cho hiện tại và tương lai.
Các thuộc tính, nếu có, sẽ được đặt tiếp theo sau tên thẻ, và chúng được phân cách
nhau bởi một hay nhiều ký tự trắng, ký tự tab, hoặc ký tự xuống dòng (enter). Thứ tự của các
thuộc tính không quan trọng.
Giá trị của thuộc tính, nếu có, sẽ được đặt ngay sau dấu bằng (=) sau tên thuộc tính.
Bạn có thể thêm vào các ký t
ự trắng trước và sau dấu bằng, chẳng hạn như: width=6, width =
6, width =6 đều có ý nghĩa giống nhau. Tốt nhất là không nên thêm các ký tự trắng vào trước
và sau dấu bằng. Khi đó mã HTML sẽ dễ đọc hơn, và dễ dàng phân biệt được các cặp thuộc
tính/giá trị trong một thẻ có nhiều thuộc tính.
Nếu giá trị của thuộc tính là một từ hay một số (không có dấu cách space), bạn có thể
đặt nó ngay sau dấu bằng. Trong trường hợ
p ngược lại, giá trị của thuộc tính phải được đặt
giữa cặp dấu nháy đơn hoặc kép.
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 19
Thành phần kết thúc của thẻ không chứa bất kỳ một thuộc tính nào.
Các thẻ có thể được đặt lồng vào nhau và cùng tác động lên đoạn văn bản được đặt

trong nó.
Ví dụ:
Dòng văn bản này <b> in đậm <i>và in nghiêng</i><b>
Một số thẻ không có thành phần kết thúc. Chẳng hạn như thẻ xuống dòng <br>, thẻ
hiển thị hình ảnh <img>, …

Thẻ <HTML></HTML>: Thẻ <HTML> ở đầu trang web tĩnh và </HTML> ở cuối trang.
Trang web được bắt đầu và kết thúc bởi thẻ này.
Các tập tin HTML luôn bắt đầu bằng thẻ <HTML>. Thẻ này không làm gì khác ngoài
nhiệm vụ báo cho trình duyệt Web biết rằng nó đang đọc một tài liệu có chứa các mã HTML.
Tương tự, dòng cuối trong tài liệu của bạn luôn luôn là thẻ </HTML>, tương đương như Hết.
Thẻ <HEAD></HEAD>: Thẻ <HEAD> đánh dấu phần đầu c
ủa trang HTML, được đặt
ngay sau thẻ <HTML>. Phần đầu giống như lời giới thiệu cho trang. Các trình duyệt Web
dùng phần đầu này để thu nhặt các loại thông tin khác nhau về trang. Mặc dù bạn có thể đặt
một số chi tiết bên trong phạm vi phần đầu này, nhưng phổ biến nhất là tên trang. Thẻ
<HEAD> có thể bỏ qua.
Trong phần lớn trường hợp, phần đầu trang sẽ chứa:
o Tiêu đề của trang (<title>)
o Định ngh
ĩa bảng kiểu (<style> và <link>)
o Dữ liệu meta, chẳng hạn như các từ khóa tìm kiếm <meta>
o Các hàm JavaScript (<script>)
Thẻ tiêu đề <TITLE></TITLE>: Thẻ <TITLE> chỉ định tiêu đề của của trang web. Tiêu
đề này sẽ xuất hiện trên thanh tiêu đề của trình duyệt (web browser: Internet Explorer hoặc
Netscape Navigator). Thẻ này chỉ hợp lệ khi đưa vào bên trong phần <HEAD>
Thẻ thân trang <BODY></BODY>: dùng chỉ định bắt đầu và kết thúc phần nội dung
trang web.

HTML Kết quả

Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 20
Ví dụ 2.2.1-3
<html>
<head>
<title>Welcome</title>
</head>
<body>
Chào các bạn!
</body>
</html>


L Nếu bạn mở thẻ, hãy đóng thẻ
Tuy có một số thẻ HTML là thực thể độc lập, nhưng đa phần được cặp đối với thẻ đầu
và cuối.
Ví dụ <html> là thẻ cặp đôi, do đó bạn cần bổ sung thẻ đóng </html> ở cuối hồ sơ
(trang web). Tương tự nếu bạn bắt đầu với đoạn in nghiêng bằng <i> (thẻ in nghiêng), thì ph
ải
kết thúc với </i>.
Trong trường hợp, nếu bạn xác định nhầm dấu chéo ngược thay vì dấu chéo thuận,
như <\html>, hoặc một số biến thể khác, trình duyệt sẽ không hiểu và bỏ qua thẻ đóng. Khi
điều này xảy ra, thuộc tính được xác định trong thẻ mở tiếp tục vượt qua điểm mà bạn muốn
ngừng. Trong nhiều tình huống, việc quên thẻ đóng có thể làm bhongf hoàn toàn trang web.
2.4.2 Màu sắc trong thi
ết kế web
Màu sắc được sử dụng trong thiết kế web thông
thường được biểu diễn với việc sử dụng Mô hình màu
RGB;
Mô hình màu RGB sử dụng mô hình bổ sung trong

đó ánh sáng đỏ, xanh lá cây và xanh lam được tổ hợp với
nhau theo nhiều phương thức khác nhau để tạo thành các
màu khác. Từ viết tắt RGB trong tiếng Anh có nghĩa là đỏ
(red), xanh lá cây (green) và xanh lam (blue), là ba màu
gốc trong các mô hình ánh sáng bổ sung.
Biểu diễn một màu dưới dạng:
#rrggbb - là giá trị
hexadecimal (thập lục) red-green-
blue
Như vậy dải màu sẽ có giá trị từ: #000000 đến #FFFFFF, tất cả gồm có 256 x 256 x 256
= 16.777.216 màu.
 Tên của các màu được sử dụng trong HTML:
Những màu cơ bản sẽ được gán một tên riêng. Khi đó, trong mã HTML, để thể hiện
màu đỏ, thay vì sử dụng mã màu #FF0000, ta dùng tên của màu đó là “red”.
Chuẩn HTML 4.01 định nghĩa 16 tên màu sau đây:

Color Hexadecimal Color Hexadecimal Color Hexadecimal Color Hexadecimal
aqua
#00FFFF
black
#000000
blue
#0000FF
fuchsia
#FF00FF
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 21
gray
#808080
green

#008000
lime
#00FF00
maroon
#800000
navy
#000080
olive
#808000
purple
#800080
red
#FF0000
silver
#C0C0C0
teal
#008080
white
#FFFFFF
yellow
#FFFF00
Các màu sắc cầu vồng nằm theo thứ tự đỏ, da cam, vàng, lục, lam, chàm, tím.
Quay trở lại với thẻ thân trang <BODY>. Bạn có thể xác lập màu nền cho trang web
thông qua thuộc tính BGCOLOR (background color) của thẻ này. Bạn hãy nhớ lại cấu trúc
của một thẻ HTML, trong đó bao gồm tên thẻ và các thuộc tính.
Để xác lập màu nền là màu đỏ, sử dụng:
<body bgcolor=”#FF0000”>
Thân trang web
</body>
hoặc:

<body bgcolor=red>
Thân trang web
</body>
…và thêm chữ màu trắng:
<body bgcolor=red text=white>
Thân trang web
</body>

Ví dụ 2.2.1-4
<html>
<head>
<title>VD Màu nền</title>
</head>
<body bgcolor=red text=white>
Trang này có màu nền là ĐỎ<br>
Và chữ màu TRẮNG
</body>
</html>

2.4.3 Thẻ chú thích
 Thẻ chú thích <! (chú thích) >:
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 22
Giống như bất cứ một ngôn ngữ lập trình nào khác, một trang mã HTML sẽ trở nên khó
hiểu, thậm chí cả đối với người viết ra chúng, nếu như trong đó không có một dòng chú thích
nào. Bởi vậy, khi viết trang HMTL, bạn nên thêm vào những dòng chú thích cần thiết về
những gì bạn đang làm.
Ðể thêm những dòng chú thích trong trang HTML, sử dụng cú pháp sau:
<! Đây là chú thích >
Tất cả những gì nằm trong phần chú thích, nghĩa là nằm giữa cặp thẻ đặc biệt <! và

>, sẽ không được trình duyệt hiển thị. Cho phép có khoảnh trắng giữa và >, nhưng không
được có khoảng trắng giữa <! và
Mặc dù đoạn văn bản chú thích không được hiển thị trên trình duyệt, nhưng bất cứ
người nào cũng có thể đọc được nó khi mở xem mã nguồn của trang HTML (vào View 
Source). Bởi vậy, hãy th
ận trọng với những gì bạn viết trong những dòng chú thích.
2.4.4 Các thẻ định dạng trình bày
 Thẻ tiêu đề:
Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những thẻ
tiêu đề (heading tag). Dạng các thẻ tiêu đề của HTML là:
<hN>Dòng tiêu đề</hN>
N là một số có giá trị từ 1 đến 6 chỉ định kích cỡ tiêu đề. Cỡ tiêu đề nhỏ dần từ <h1>
đến <h6>.
Thẻ Tiêu đề được sử dụng trong trường hợp nào? Nó tương tự như việc đặt Heading
trong Microsoft Word. Chẳng hạn trong tài liệu mà các bạn đang xem, chúng ta có thể sử
dụng thẻ tiêu để <h1> cho tên của Chương 1, Chương 2, … Sử dụng thẻ tiêu đề <h2> cho
tên của các mục 1.1, 1.2… của Chương 1, và c
ứ tương tự như thế.
Sau đây là một vài ví dụ cho những kích cỡ khác nhau của tiêu đề :


HTML Kết quả
Ví dụ 2.2.1-5
<html>
<head>
<title>Heading</title>
</head>
<body>
<! Có 6 mức tiêu đề >
<h1>Dòng tiêu đề 1</h1>

<h2>Dòng tiêu đề 2</h2>
<h3>Dòng tiêu đề 3</h3>
<h4>Dòng tiêu đề 4</h4>
<h5>Dòng tiêu đề 5</h5>
<h6>Dòng tiêu đề 6</h6>
</body>
</html>



Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 23
 Thẻ ngắt dòng <br> (xuống dòng không sang đoạn mới):
Để ngắt dòng trong HTML, chúng ta dùng thẻ ngắt dòng <br />. Giống như các thẻ
khác, thẻ ngắt dòng có thể xuất hiện bất kỳ nơi nào trong văn bản, ở cuối dòng muốn ngắt.
Đối với thẻ ngắt dòng <br />, không có thẻ đóng </br>.
Bạn cần lưu ý rằng, dòng tiếp theo vẫn ở cùng đoạn văn bản so với dòng trước nó.
 Thẻ
ngắt đoạn <p></p> (xuống dòng sang đoạn mới):
Để ngắt đoạn văn bản và chuyển sang đoạn văn bản (paragraph) mới, ta dùng thẻ <p>.
Thành phần </p> cuối đoạn không nhất thiết phải có. Có thể chỉ định các thuộc tính của thẻ
này như sau:
<p align=align-type>
Trong đó, align = align-type dùng chỉ định canh đoạn mới.
align-type = left (canh trái),
right (canh phải)
center (canh giữa).

HTML Kết quả

Ví dụ 2.2.1-6
<html>
<head>
<title>Paragraph</title>
</head>
<body>
<! Mặc định, trình duyệt sẽ
Canh lề bên trái >
Con cóc trong hang<br>
Con cóc nhảy ra

<p align="center">
Con cóc nhảy ra<br>
Con cóc ngồi đó</p>

<p align="right">
Con cóc ngồi đó<br>
Con cóc nhảy đi.</p>
</body>
</html>


 Thẻ thêm đường thẳng nằm ngang <hr>:
Sử dụng thẻ <hr> để thêm đường thẳng nằm ngang trong trang web. Thẻ này được
định nghĩa như sau:
<hr align=align-type color=color noshade size=n width=m />
 Trong đó:
- align=align-tpye: canh lề cho đường thẳng ngang, align-type có thể là left, right, center
- color=color: màu đường thẳng ngang
- noshade: không có bóng

- size=n: độ đậm của đường thẳng ngang, n có giá trị là số nguyên tính theo đơn vị
pixel.
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 24

Ví dụ 2.2.1-7
<html>
<head>
<title>Paragraph</title>
</head>
<body>
<p align="left">Đoạn văn bản 1<br>Canh trái</p>
<hr align="center" color="#FF0000" noshade size="3" width="200" />
<p align="right">Đoạn văn bản 2<br>Canh phải</p>
<hr align="left" color="black" size="2" width=”20%” />
</body>
</html>



 Chú ý
<hr align="left" color="black" size="2" width=”20%” />
Trong trường hợp thuộc tính chiều rộng được chỉ định bằng phần trăm ( ví dụ
width=20%), thì giá trị chiều rộng bằng 20% chiều rộng hiện tại của trình duyệt. Như vậy chiều
rộng của đường thẳng nằm ngang thay đổi phụ thuộc vào bề rộng trình duyệt. Bạn hãy thay
đổi và kiểm tra.
 Thẻ in đậm <b></b>:
Hiển thị văn bản đậm theo physical type

Thẻ in nghiêng <i></i>:

Hiển thị văn bản nghiêng theo physical type
 Thẻ gạch dưới <u></u>:
Hiển thị văn bản gạch dưới theo physical type
 Thẻ gạch giữa <s></s>:
Hiển thị văn bản gạch giữa (strikeout) theo physical type

Ví dụ 2.2.1-8
Công nghệ Web và ứng dụng
Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 25
<html>
<head>
<title>Text</title>
</head>
<body>
Dòng thứ 1: thông thường<br>
<b>Dòng thứ 2: đậm</b><br>
<i>Dòng thứ 3: nghiêng</i><br>
<u>Dòng thứ 4: gạch dưới</u><br>
<s>Dòng thứ 5: gạch giữa</s><br>
<i><b>Dòng thứ 6: vừa đậm vừa nghiêng</b></i><br>
<i><u>Dòng thứ 7: vừa nghiêng vừa gạch dưới</u></i>
</body>
</html>



 Thẻ đậm logic type <STRONG></STRONG>:
Hiển thị văn bản đậm theo logic type
 Thẻ nghiêng logic type <EM></EM>:
Hiển thị văn bản nghiêng theo logic type

 Thẻ gạch ngang logic type <STRIKE></STRIKE>:
Hiển thị văn bản gạch dưới theo logic type
 Thẻ chỉ số logic type <SUB></SUB>:
Hiển thị văn bản dạng chỉ số theo logic type
 Thẻ mũ logic type <SUP></SUP>:
Hiển thị văn bản dạng mũ theo logic type
 Ví dụ:
<html>
<head>
<title>Thẻ số mũ – chỉ số</title>
</head>
<body>
(x₁ + x₂)² = 1