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

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.. Inter

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: http://www.cit.udn.vn Email: cit@cit.udn.vn

Tài liệu

CÔNG NGHỆ WEB VÀ ỨNG DỤNG

Đà Nẵng, 01/2008

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

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

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

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

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á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ó 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ậ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

- 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

Here are some sample URLs:

http://www.kumquat.com/docs/catalog/price_list.html http://www.kumquat.com/

ftp://ftp.netcom.com/pub/

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:

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

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 (http://cit.udn.vn) 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

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

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

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:

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

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

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>

</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

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ẻ đó

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

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

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

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

<body bgcolor=red text=white>

Thân trang web

<body bgcolor=red text=white>

Trang này có màu nền là ĐỎ<br>

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

Sau đây là một vài ví dụ cho những kích cỡ khác nhau của tiêu đề :

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)

Canh lề bên trái >

Con cóc trong hang<br>

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

<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

<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

</body>

</html>

Thẻ định font chữ cơ sở <BASEFONT></BASEFONT>:

Dùng thẻ <basefont> để chỉ định kiểu chữ, cỡ chữ, màu sắc cho các văn bản không định dạng

color=color: màu văn bản

face=name: tên font

size=n: chỉ định kích thước văn bản, n từ 1 đến 7 Thêm

dấu cộng + hoặc trừ - phía trước để chỉ định việc tăng hoặc giảm kích thước so với kích thước đã định trong basefont

color=color: màu văn bản

face=name: tên font

<font size="5">Kích thước văn bản là 5</font>

<p><font size="+1">Kích thước văn bản là 3 + 1 = 4</font></p>

<p><font size="+2">Kích thước văn bản là 3 + 2 = 5</font></p>

<p><font size="-1">Kích thước văn bản là 3 - 1 = 2</font></p>

</body>

</html>

Một số font unicode thường được dùng: face=arial, Times New Roman, …

Ký tự định dạng trước ()

Chúng ta đã biết là một Web browser 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 Tuy nhiên có một vài trường hợp cá biệt mà việc trình bày trang với các tính chất đó trở nên quan trọng

Kiểu ký tự định dạng trước cho phép bạn có thể bảo toàn các dấu cách và dấu xuống dòng trong trang văn bản HTML giống như khi bạn gõ vào trong quá trình soạn thảo Điều đó

có nghĩa là bạn không nên sử dụng các thẻ <BR> cũng như <P> trong đoạn ký tự định dạng trước

Browser sử dụng phông chữ bề rộng cố định (fixed-width font) để hiển thị nội dung trong phần ký tự định dạng trước Thông thường, đó là phông hệ thống đang được sử dụng trong máy tính của bạn

Kiểu ký tự định dạng trước rất có ích trong trường hợp dấu cách là không thể thiếu được, chẳng hạn như khi thể hiện một đoạn mã chương trình

Kiểu ký tự định dạng trước được bắt đầu bằng thẻ <PRE> và kết thúc bằng thẻ

Liên kết siêu văn bản (Hyperlinks)

Liên kết siêu văn bản (Hyperlinks hay gọi tắt là link) là công cụ cơ bản để “di chuyển” trên WWW Hyperlinks được dùng để di chuyển đến các điểm khác nhau được đánh dấu trên trang web, được dùng để tải các tập tin, hay có thể mở một trang web được đặt trên một máy chủ web khác

Dùng thẻ <a> để xác lập một liên kết Cấu trúc như sau:

<a href=”địa_chỉ_liên_kết (url)”>Miêu tả liên kết</a>

Ví dụ:

<a href=”http://cit.ud.edu.vn/Albums.aspx”>Albums ảnh Trường CĐ CNTT</a>

Trong ví dụ này, nếu bạn bấm chuột vào dòng “Albums ảnh Trường CĐ CNTT”, bạn sẽ được chuyển đến địa chỉ “http://cit.ud.edu.vn/Albums.aspx”, tức là trình duyệt sẽ mở trang Albums ảnh tương ứng

Các thuộc tính của thẻ <a>:

o href

Thuộc tính href chỉ định địa chỉ liên kết, dòng văn bản sau dấu “=” là địa chỉ đối tượng liên kết Dòng văn bản giữa cặp thẻ đóng/mở <a> và </a> thường dùng để miêu tả liên kết, hoặc có thể là một đoạn văn bất kỳ Khi người duyệt web bấm chuột vào dòng này, trình duyệt sẽ chuyển đến đối tượng liên kết

Ví dụ:

<a name=”top”>Đầu trang</a>

Ở cuối trang web có thể đặt liên kết đến đầu trang như sau:

<a href=”#top”>Lên đầu trang</a>

Và các trang web khác có thể liên kết với trang này ngay tại vị trí đã được đánh dấu (đầu trang) bằng liên kết:

<a href=”trangchu.html#top”>Chuyển đến đầu trang chủ</a>

Màu của liên kết:

Trong trang web, bạn thấy liên kết nào cũng màu xanh, gõ vào thì thành màu trắng, sau khi gõ thì màu xám Ðiều đó được thực hiện bởi các đoạn code sau (trong body tag):

<body bgcolor="white" link="blue" alink="white" vlink="gray">

(alink= active link, vlink= visited link)

Ví dụ

<body style="font-size:25" bgcolor="white"

link="blue" alink="red" vlink="gray">

<a href="http://www.cit.udn.vn">Trường CĐ CNTT</a><br>

<a href="http://dut.udn.vn">Trường Đại học Bách khoa</a><br>

<a href="http://edt.udn.vn">Trường Đại học Kinh tế</a><br>

</body>

2.4.5 Form

Khi viết một trang web, bạn muốn không chỉ cung cấp thông tin cho người đọc, mà còn muốn giao tiếp với họ và thu nhận các thông tin phản hồi Để làm được điều đó, bạn cần dùng Form (biểu mẫu)

Forms are the most popular way to make web pages interactive Like forms on paper, a form on a web page allows the user to enter requested information and submit it for processing (Fortunately, forms on a web page are processed much faster.)

Form chứa một hay nhiều ô nhập dữ liệu (text-input box), nút bấm (clickable button), nút lựa chọn (checkbox), hình ảnh (image)…, tất cả được đặt trong thẻ <form> Bạn có thể tạo ra nhiều form trong một trang HTML, và mỗi form chứa những thành phần bên trong khác nhau Trong các thành phần của một form, thì nhãn (label) là thành phần thường được dùng nhất, vì

nó có chức năng chú thích, diễn giải hay hướng dẫn cho người dùng để họ có thể điền đúng vào các thành phần của form Và đối với một số thành phần của form, bạn có thể sử dụng các câu lệnh và sự kiện của JavaScript để tạo ra các hiệu ứng đa dạng cho form, chẳng hạn như kiểm tra tính đúng đắn của dữ liệu đã được người dùng nhập vào form

Người dùng điền đầy đủ thông tin vào các trường của form, sau đó bấm chuột vào một nút nhấn (button) đặt biệt (Submit button), hoặc đơn giản là bấm phím Enter, để gửi tất cả những thông tin đó lên máy chủ (server) Trình duyệt sẽ làm nhiệm vụ đóng gói các thông tin

và gửi đi Tại máy chủ, những thông tin nhận được từ người duyệt web sẽ được phân tích, xử

lý và trả lời lại cho phía người duyệt web, thông thường là một trang HTML Trang HTML có chức năng “trả lời” này đôi khi chỉ đơn giản là một câu cảm ơn (trong trường hợp lấy ý kiến người dùng chẳng hạn), hay là một lời hướng dẫn làm thế nào để nhập đúng thông tin vào các trường trên form (trong trường hợp thông tin nhập vào không hợp lệ)

Form có thể được đặt ở bất kỳ đâu trong phần thân (nghĩa là giữa cặp thẻ <body> và

</body>) của trang HTML, với thẻ bắt đầu là thẻ <form>, và thẻ kết thúc tương ứng là thẻ

</form>

Để sử dụng form, cần phải xác định ít nhất 2 thuộc tính Một thuộc tính để quy định dữ

liệu được gửi đi đâu, thuộc tính kia quy định phương thức gửi dữ liệu là gì

<form action="Vd2_2_5-2.htm" method="get" name=”form1”>

Họ: <input type="text" name="FirstName" /><br />

Tên: <input type="text" name="LastName" /><br>

<input type="submit" value="Đăng nhập" />

Thuộc tính action

Thuộc tính action là thuộc tính bắt buộc phải có khi sử dụng form Nó xác định đường dẫn URL của ứng dụng sẽ tiếp nhận và xử lý dữ liệu nhập vào từ form Nói cách khác, thuộc tính action sẽ chỉ ra rằng, dữ liệu được nhập vào từ form, sau khi nhấn Submit, sẽ được gửi

đi đâu

Thẻ <form> với thuộc tính action có thể được thiết lập như sau:

<form action=”http://ts.edu.vn/diemthi.aspx”>

………

</form>

Ví dụ trên chỉ ra rằng, trình duyệt cần phải gửi tất cả dữ liệu được nhập vào form đến

trang diemthi.aspx theo địa chỉ url trong thuộc tính action

Thuộc tính method

Bên cạnh action, thì method cũng là một thuộc tính bắt buộc khi dùng thẻ <form> Thuộc tính method chỉ rõ phương thức mà trình duyệt sẽ gửi dữ liệu của form đến máy chủ

để xử lý Có 2 phương thức là GET và POST

Với phương thức POST, trình duyệt sẽ gửi dữ liệu qua 2 bước: đầu tiên, dựa vào địa chỉ URL được xác định bởi thuộc tính action, trình duyệt sẽ kết nối với ứng dụng được chỉ định để xử lý dữ liệu trên form Ứng dụng này được đặt tại máy chủ Một khi kết nối được thiết lập, trình duyệt mới gửi dữ liệu lên máy chủ

Với GET, cách thức gửi dữ liệu từ form lên máy chủ sẽ được thực hiện theo một cách khác Việc kết nối với máy chủ và việc gửi dữ liệu được thực hiện cùng một lúc Trình duyệt

sẽ nối dữ liệu lấy từ form vào địa chỉ URL trong thuộc tính action, và gửi lên máy chủ

Chú ý rằng, với phương thức POST, trình duyệt sẽ đóng gói tất cả dữ liệu nhập và từ form và gửi lên máy chủ Còn với phương thức GET, dữ liệu nhập vào sẽ được nối vào địa chỉ URL để gửi đi

Dưới đây là một ví dụ sử dụng form với với thuộc tính method là GET

<form method=”GET” action="http://ts.edu.vn/diemthi.aspx">

</form>

Việc nhắp chuột vào một siêu liên kết (hyperlink) trong một trang web, thông điệp email hay tài liệu khác, việc gõ một địa chỉ vào thanh địa chỉ của một trình duyệt và nhấn Enter, hay nhấn chuột vào các nút liên kết (button links) hay Favorites trong trình duyệt, tất cả đều sử dụng phương thức GET Cách duy nhất gửi các giá trị đến máy chủ từ những hành động này

là qua chuỗi truy vấn (QueryString) được gắn thêm vào URL

POST hay GET?

Vậy trong trường hợp nào thì dùng POST, trong trường hợp nào dùng GET?

- Để dữ liệu được truyền một cách tốt nhất, hãy dùng phương thức GET cho những form có ít trường dữ liệu

- Chiều dài của chuỗi URL bị giới hạn, nên nếu dùng phương thức GET thì dữ liệu có nguy cơ bị tràn và bị cắt bớt Dùng phương thức POST cho phép gửi dữ liệu của form với

nhiều trường, hay với những đoạn văn bản dài Nghĩa là POST không bị giới hạn về kích thước lượng thông tin gửi đi

- Trong những trường hợp đòi hỏi sự bảo mật về dữ liệu, hãy dùng POST GET đưa các giá trị tường minh vào trong URL và sẽ được ghi lại trong file log khi đi qua các server

Ở ví dụ 2.2.5-1, sử dụng phương thức GET, sau khi bấm vào nút “Đăng nhập” bạn sẽ thấy kết quả:

Nếu dùng phương thức POST:

Các thành phần thường được sử dụng trong form

Để nhập dữ liệu vào form như văn bản, danh sách, chọn lựa, chúng ta sử dụng các thẻ <input>

Use the <input> tag to define any one of a number of common form "controls," as they are called in the HTML 4 and XHTML standards, including text fields, multiple-choice lists, clickable images, and submission buttons Although there are many attributes for the <input>

tag, only the type and name attributes are required for each element (only type for a submission or reset button; see the following explanation) And as we describe in detail later, each type of input control uses only a subset of the allowed attributes Additional <input>

attributes may be required based upon which type of form element you specify

Các thành phần của form gồm: Text boxes, Password boxes, Checkboxes, Option (Radio) buttons, Submit, Reset, File, Hidden and Image Các thành phần này sẽ được chỉ định thông qua thuộc tính TYPE của thẻ <INPUT> </INPUT>

o Text boxes

HTML

<form name="input" action="html_form_action.asp" method="get">

Username:

<input type="text" name="user">

<input type="submit" value="Submit">

</form>

o Image Submit Button

o Reset

o Drop Down List

<form action="…" method=post>

<form action="xuly.asp" method=”post”>

<h1>ĐĂNG KÝ TÀI KHOẢN</h1>

<h2>Thông tin cá nhân</h2>

Họ và tên: <input type="text" name="hoten" size="40"><br>