Giáo trình Thiết kế web - Trần Thị Ngân

TRƢỜNG CAO ĐẲNG NGHỀ CÔNG NGHIỆP HÀ NỘI

Chủ biên: Trần Thị Ngân

Đồng tác giả: Bùi Quang Ngọc

GIÁO TRÌNH

THIẾT KẾ WEB

Hà Nội – 2012

LỜI NÓI ĐẦU

Mạng Internet đƣợc coi nhƣ một tổ hợp các Website, ngƣời sử dụng

có thể đi từ trang này sang trang khác, có thể tƣơng tác với các trang Web

để hiển thị những nội dung khác nhau tùy thuộc theo yêu cầu.

Hiện nay, hầu hết các tổ chức, công ty đều sử dụng Website để giới

thiệu và quảng bá sản phẩm, dịch vụ của mình. Việc thiết kế Website là rất

quan trọng, nó thể hiện thƣơng hiệu và đẳng cấp của công ty và tổ chức. Vì

thế, thiết kế Website đã trở thành công việc và là nghề đƣợc nhiều bạn trẻ

ƣa thích.

Giáo trình môn học “ Thiết kế Web ” đƣợc biên soạn dựa theo đề

cƣơng chi tiết môn học Thiết kế Web thuộc chƣơng trình đào tạo nghề

Quản trị mạng của trƣờng Cao đẳng nghề Công nghiệp Hà nội, ban hành

năm 2011. Giáo trình này cung cấp cho sinh viên ngành Công nghệ Thông

tin những kiến thức căn bản về thiết kế web nhƣ : Các khái niệm cơ bản

của thiết kế Web, quy trình thiết kế Web, các thẻ HTML cơ bản, các công

cụ và phần mềm để thiết kế đƣợc giao diện Web, lập trình với ngôn ngữ

ASP.NET kết hợp với cơ sở dữ liệu để tạo ra các trang Web động,....

Tuy đã có nhiều cố gắng trong quá trình biên soạn nhƣng vẫn còn

nhiều thiếu sót, chúng tôi mong nhận đƣợc các ý kiến đóng góp của các

thầy cô, đồng nghiệp và các bạn sinh viên để chúng tôi có thể hoàn thiện

giáo trình này hơn.

Hà Nội, ngày 5 tháng 12 năm 2012.

Tham gia biên soạn giáo trình

1. Chủ biên: Trần Thị Ngân

2. Đồng tác giả: Bùi Quang Ngọc

1

Tuyên bố bản quyền

Tài liệu này là loại giáo trình nội bộ dùng trong nhà trƣờng với

mục đích làm tài liệu giảng dạy cho giáo viên và học sinh, sinh viên

nên các nguồn thông tin có thể đƣợc tham khảo.

Tài liệu phải do trƣờng Cao đẳng nghề Công nghiệp Hà Nội in

ấn và phát hành.

Việc sử dụng tài liệu này với mục đích thƣơng mại hoặc khác với

mục đích trên đều bị nghiêm cấm và bị coi là vi phạm bản quyền.

Trƣờng Cao đẳng nghề Công nghiệp Hà Nội xin chân thành cảm

ơn các thông tin giúp cho nhà trƣờng bảo vệ bản quyền của mình.

Địa chỉ liên hệ:

Trƣờng Cao đẳng nghề Công nghiệp Hà Nội.

131 – Thái Thịnh – Đống Đa – Hà Nội

Điện thoại:

(84-4) 38532033

(84-4) 38533523

Fax:

Website: www.hnivc.edu.vn

2

MỤC LỤC

Trang

L ỜI NÓI ĐẦ U .............................................................................................. 1

TUYÊN B Ố B Ả N QUY Ề N .......................................................................... 2

M Ụ C L Ụ C..................................................................................................... 3

BÀI 1 : T Ổ NG QUAN V Ề THI Ế T K Ế WEB............................................. 14

1. L ị ch s ử WWW..................................................................................... 14

2. Các khái ni ệm cơ bả n .......................................................................... 17

2.1. Web Server, Web Browse ............................................................ 17

2.2. Website, Web page, Static page, Dynamic page .......................... 17

2.3. Web Hosting, Upload web, Download web ................................. 20

2.4. Đị a ch ỉ URL, đị a ch ỉ URL tuy ệt đối và đị a ch ỉ URL tƣơng đố i. . 21

2.4.1. Đị a ch ỉ URL........................................................................... 21

2.4.2. URL tuy ệt đối và URL tƣơng đố i .......................................... 23

3. Thi ế t k ế Web. ...................................................................................... 23

3.1. Khái ni ệ m thi ế t k ế Web ................................................................ 23

3.2. Quy trình thi ế t k ế web. ................................................................. 24

3.2.1. Quy trình. ............................................................................... 24

3.2.2. Xu ấ t b ả n web. ........................................................................ 25

3.3. Các lƣu ý khi thiế t k ế we b ............................................................ 26

3.3.1. T ừ ng ữ .................................................................................... 26

3.3.2. Màu s ắ c ................................................................................. 27

3.3.3. Hình ả nh................................................................................ 27

3.3.4. B ố c ục đơn giả n, h ợ p lý ........................................................ 28

3.3.5. Th ờ i gian t ả i ........................................................................... 29

4. Nh ậ p môn ngôn ng ữ HTML............................................................... 29

3

A. LÝ THUY Ế T..................................................................................... 29

4.1. So ạ n th ả o trang mã ngu ồ n HTML................................................ 29

4.2. Các th ẻ HTML(Tags). .................................................................. 31

4.3. C ấ u trúc t ổ ng quát t ệ p tin HTM L ................................................. 32

4.4. Th ẻ BODY.................................................................................... 33

4.5. Văn bả n trên trang web................................................................. 34

4.5.1. V ấn đề ng ắ t dòng. .................................................................. 34

4.5.2. Đị nh d ạ ng ki ể u dáng – Style.................................................. 36

4.5.3. Thay đổ i Font, Siz e ................................................................ 36

4.5.6. Đƣờ ng k ẻ ngang và ký t ự đặ c bi ệ t ......................................... 38

4.5.7. T ạo văn bản đề m ụ c ............................................................... 39

4.5.8. T ạo danh sách cho các đoạn văn bả n..................................... 40

4.5.9. T ạ o hi ệ u ứ ng chuy ển độ ng ch ữ .............................................. 44

4.6. Thi ế t l ậ p liên k ế t cho trang web. .................................................. 45

4.6.1. Khái quát ............................................................................... 45

4.6.2. Liên k ế t c ụ c b ộ (Local Link). ............................................... 45

4.6.3. Liên k ế t t ừ xa (Remote Link) ................................................ 47

4.6.4. Dùng hình ả nh làm nhãn liên k ế t........................................... 47

4.6.5. B ản đồ ả nh dùng th ẻ AREA. ................................................. 48

4.6.6. Màu c ủ a liên k ế t.................................................................... 48

4.7. Multimedia trên trang web ........................................................... 48

4.7.1. Chèn hình ả nh ........................................................................ 48

4.7.2. Liên k ết đế n t ệ p tin âm thanh................................................. 50

4.7.3. Chèn nh ạ c n ề n........................................................................ 51

4.7.4. Chèn điề u khi ể n nh ạ c Plugin ................................................. 51

4

4.7.3. Chèn video ............................................................................. 52

4.8. B ả ng bi ể u ...................................................................................... 52

4.8.1. Định nghĩa bả ng – th ẻ Table.................................................. 53

4.8.2 Định nghĩa hàng -th ẻ TR : ....................................................... 53

4.8.3. Th ẻ định nghĩa ô - th ẻ TD :..................................................... 53

4.8.4. Th ẻ định nghĩa tiêu đề c ộ t - th ẻ T H ....................................... 53

B. TH Ự C HÀNH..................................................................................... 55

1. N ộ i dung th ự c hành ........................................................................ 55

2. B ả ng v ật tƣ thiế t b ị c ầ n thi ế t........................................................... 57

3. Quy trình th ự c hi ệ n......................................................................... 57

4. T ổ ch ứ c th ự c hi ệ n ............................................................................ 59

5. Ki ểm tra đánh giá ............................................................................ 59

CÂU H Ỏ I VÀ BÀI T Ậ P C Ủ A BÀI 1..................................................... 60

A. Tr ắ c nghi ệ m................................................................................. 60

B. Bài t ậ p th ự c hành......................................................................... 62

BÀI 2 : THI Ế T K Ế WEB TĨNH VỚ I PH Ầ N M Ề M DREAMWEAVE R .. 69

A. LÝ THUY Ế T...................................................................................... 69

1. T ổ ng quan........................................................................................... 69

1.1. Gi ớ i thi ệ u ph ầ n m ề m Dreamweaver............................................. 69

1.2. Giao di ệ n và các thanh công c ụ cơ bả n. ...................................... 70

1.2.1. Kh ởi độ ng Dreamweaver 8.................................................... 70

1.2.2. Màn hình làm vi ệ c. ................................................................ 70

1.2.3. Các thanh công c ụ .................................................................. 70

1.2.4. M ở m ộ t s ố b ảng điề u khi ể n qu ản lý các đối tƣợ ng ............... 72

1.3. Làm vi ệ c v ớ i Website.................................................................. 72

5

1. 3.1. Khái quát ............................................................................... 72

1.3.2. T ạ o m ớ i Site:........................................................................ 72

1.3.3. Qu ả n lý site ........................................................................... 74

2. Trang và văn bả n trên trang................................................................ 76

2.1. Các thao tác qu ả n lý trang web..................................................... 76

2.1.1. T ạ o 1 trang web m ớ i .............................................................. 76

2.1.2. M ở m ộ t t ập tin HTML đang tồ n t ạ i ...................................... 77

2.1.3. Đóng 1 trang tệ p tin HTML.................................................. 77

2.1.4. Lƣu mộ t trang tài li ệ u. ........................................................... 77

2.1.5. Hi ể n th ị trang trên trình duy ệ t: .............................................. 78

2.2. Thi ế t l ậ p thu ộ c tính cho trang we b ............................................... 78

2.2.1. Thu ộ c tính chung cho trang: L ớ p Appearance ...................... 78

2.2.2. Các thu ộ c tính chung cho liên k ế t : L ớ p Link ....................... 79

2.2.3. T ạ o m ẫu văn bản đề m ụ c : L ớ p Headings ............................ 80

2.2.4. Ti êu đề trang: Ch ọ n m ụ c Title/Encoding .............................. 80

2.3. Nh ập văn bả n ................................................................................ 80

2.4. Đị nh d ạng văn bả n ........................................................................ 81

2.5. T ạo danh sách cho văn bả n........................................................... 82

2.5.1. T ạ o danh sách m ớ i ................................................................. 82

2.5.2. Ch ỉ nh s ử a các thu ộ c tính c ủ a danh sách :............................... 82

2.6. Chèn kí t ự đặ c bi ệ t........................................................................ 83

3. Multimedia trên trang Web ................................................................. 83

3.1. Hình ả nh........................................................................................ 83

3.1.1. Chèn hình ả nh ........................................................................ 83

3.1.2. Đị nh d ạ ng hình ả nh............................................................... 83

6

3.1.3. Gi ữ to ạ độ v ị trí cho ả n h ........................................................ 84

3.2. T ậ p tin Media (Audio, Video )...................................................... 85

3.2.1. Khái quát v ề các d ạ ng t ậ p tin Multi Media: .......................... 85

3.2.2. Liên k ết đế n t ậ p tin Medi a ..................................................... 85

3.2.3. Chèn nh ạ c n ề n........................................................................ 86

3.2.4. Nhúng t ệ p tin media vào trang web ....................................... 86

4. Liên k ế t................................................................................................ 89

4.1. T ạ o liên k ết đế n trang tài li ệ u khác .............................................. 89

4.2. T ạ o liên k ết đế n m ộ t ph ầ n c ủ a trang tài li ệ u. ............................... 90

4.3. Liên k ế t Email .............................................................................. 90

4.4. B ản đồ ả nh (hotspot)..................................................................... 91

4.5. T ạ o Rollover ................................................................................. 92

4.6. T ạ o liên k ế t Navigation Bar.......................................................... 93

4.6.1. Chèn thanh điều hƣớ ng:......................................................... 93

4.6.2. Hi ệ u ch ỉnh thanh điều hƣớ ng:................................................ 94

4.7. B ổ sung nút Flash. ........................................................................ 95

4.7.1. T ạ o nút Flash.......................................................................... 95

4.7.2. Ch ỉ nh s ửa các đối tƣợ ng nút Flash: ....................................... 96

5. Các y ế u t ố độ ng trên trang .................................................................. 96

5.1. Chèn t ệ p tin flash .......................................................................... 96

5.2. Chèn Java apple t ........................................................................... 97

5.3. Chèn Java Scrpit ........................................................................... 97

5.3.1. Gi ớ i thi ệ u v ề Javascript: ........................................................ 97

5.3.2. Nhúng javascript vào trang web: ........................................... 97

5.4. Chu ỗ i ký t ự có hi ệ u ứ ng Flash..................................................... 99

7

6. B ả ng (Table)...................................................................................... 100

6.1. S ử d ụ ng b ả ng ở ch ế độ Standard :............................................... 101

6.1.1. Chèn b ả ng ............................................................................ 101

6.1.2. Nh ậ p d ữ li ệ u vào b ả n g ......................................................... 101

6.1.3. Đị nh d ạ ng b ả n g .................................................................... 103

6.1.4. Đị nh d ạ ng ô......................................................................... 103

6.1.5. Chèn thêm ô, hàng và c ộ t vào b ả n g ..................................... 104

6.2. S ử d ụ ng b ả ng ở ch ế độ Layout View :........................................ 105

7. Form .................................................................................................. 105

7.1. Chèn Form. ................................................................................. 106

7.2. Thêm các đối tƣợ ng lên Form .................................................... 106

7.2.1. Text field .............................................................................. 106

7.2.2. Textarea................................................................................ 107

7.2.3. Radio Group:........................................................................ 108

7.2.3. Checkbox: ............................................................................ 109

7.2.4. List / Menu:.......................................................................... 109

7.2.5. Jump menu :.......................................................................... 110

7.2.6. File Field. ............................................................................. 111

7.2.7. Submit và Reset. .................................................................. 111

7.2.8. Ki ể m tra d ữ li ệ u nh ậ p trên Form. ........................................ 112

8. Frame & Template............................................................................. 113

8.1. Frame. ......................................................................................... 113

8.1.1. T ạ o frame ............................................................................. 113

8.1.2. Thi ế t l ậ p các thu ộ c tính cho Frame...................................... 114

8.1.3. Lƣu các Frame và Frameset ................................................. 115

8

8.1.4. Liên k ế t trong framese t ........................................................ 115

8.2. Template ..................................................................................... 116

8.2.1. T ạ o Template. ...................................................................... 116

8.2.2. Thi ế t k ế t ệ p tin Templat e ..................................................... 117

8.2.3. Áp d ụ ng Template cho m ộ t tài li ệ u. .................................... 118

8.2.4. S ửa, xoá, đổ i tên t ậ p tin Template ....................................... 118

B. TH Ự C HÀNH................................................................................... 119

1. N ộ i dung th ự c hành ...................................................................... 119

2. B ả ng v ật tƣ thiế t b ị c ầ n thi ế t......................................................... 121

3. Quy trình th ự c hi ệ n....................................................................... 121

4. T ổ ch ứ c th ự c hi ệ n .......................................................................... 123

5. Ki ểm tra đánh giá .......................................................................... 123

CÂU H Ỏ I VÀ BÀI T Ậ P BÀI 2 ............................................................ 124

A. Câu h ỏ i tr ắ c nghi ệ m...................................................................... 124

B. Bài t ậ p ........................................................................................... 127

BÀI 3 : XÂY D ỰNG WEB ĐỘ NG.......................................................... 133

A. LÝ THUY Ế T.................................................................................... 133

1. T ổ ng quan v ề ASP.NET và ADO.NET............................................. 133

1.1. T ổ ng quan v ề ASP.NE T ............................................................. 133

1.1.1. Gi ớ i thi ệ u v ề ASP.NET ....................................................... 133

1.1.2. L ị ch s ử phát tri ể n ................................................................. 134

1.1.3. Nh ững ƣu điể m c ủ a ASP.NET ............................................ 136

1.2. T ổ ng quan v ề ADO.NET............................................................ 137

1.2.1. Gi ớ i thi ệ u ............................................................................. 137

1.2.2. Data Provider ....................................................................... 138

9

1.2.3. Các đối tƣợ ng c ủ a ADO.NET.............................................. 139

1.3.Cài đặ t và c ấ u hình IIS ................................................................ 141

1.3.1. Gi ớ i thi ệ u v ề IIS................................................................... 141

1.3.2. Cài đặ t IIS trên Windows 7.................................................. 142

1.4. T ạ o ứ ng d ụng ASP.NET đầ u tiên............................................... 143

2. WEB SERVER CONTROL.............................................................. 146

2.1. HTML Control............................................................................ 146

2.2. ASP.NET Server Control ........................................................... 148

2.2.1 ASP.NET Page...................................................................... 148

2.2.2. Các điệ u khi ển cơ bả n.......................................................... 150

2.2.3. Label..................................................................................... 151

2.2.4. Hyperlink ............................................................................. 151

2.2.5. Textbox ................................................................................ 152

2.2.6. Image.................................................................................... 152

2.2.7. Button, ImageButton, LinkButton. ...................................... 152

2.2.8. Listbox và DropdownList .................................................... 153

2.2.9. Checkbox và Radiobutton.................................................... 156

2.2.10. CheckboxList và RadioButtonList .................................... 157

3. Các đối tƣợ ng trong ASP.NET.......................................................... 158

3.1. Đối tƣợ ng Reques t ...................................................................... 158

3.2. Respons e ..................................................................................... 159

3.3. Sessio n ........................................................................................ 159

3.4. Cookie......................................................................................... 162

4. Các đối tƣợ ng ADO.NET.................................................................. 165

4.1. Connection.................................................................................. 165

10

4.2. Command.................................................................................... 169

4.3. DataReader ................................................................................. 172

4.4. DataAdapter................................................................................ 173

4.5. Đối tƣợ ng Dataset và DataTable ................................................ 174

5. Xây d ự ng ứ ng d ụ ng m ẫu Website thƣơng mại điệ n t ử ..................... 189

5.1. Thi ế t k ế ứ ng d ụ ng....................................................................... 189

5.2. Thi ế t k ế cơ sở d ữ li ệ u ................................................................. 192

5.2.1. Thi ế t k ế b ả ng Department.................................................... 192

5.2.2. Thi ế t k ế b ả ng Category........................................................ 192

5.2.3. Thi ế t k ế b ả ng Produc t .......................................................... 193

5.2.4. T ạ o b ả ng ProductCategory .................................................. 195

5.2.5. Thi ế t k ế b ả ng Orders............................................................ 195

5.2.6. Thi ế t k ế b ả ng OrderDetails.................................................. 196

5.2.7. Thi ế t k ế b ả ng ShoppingCart ................................................ 196

5.3. Vi ết chƣơng trình ........................................................................ 197

5.3.1. File web.config .................................................................... 197

5.3.2. Xây d ự ng l ớ p GiftShopConfiguration ................................. 198

5.3.3. Xây d ự ng l ớ p truy c ập cơ sở d ữ li ệ u GenericDataAccess.cs

........................................................................................................ 200

5.3.4. Xây d ự ng l ớ p CatelogAccess.cs .......................................... 202

5.3.5. T ạ o trang DepartmentList.ascx............................................ 211

5.3.6. Thi ế t k ế trang hi ể n th ị danh sách s ả n ph ẩ m......................... 216

5.3.7. Thi ế t k ế menu hi ể n th ị danh m ụ c s ả n ph ẩ m ........................ 226

5.3.8. Thi ế t k ế trang tìm ki ế m s ả n ph ẩ m ....................................... 231

5.4. Thi ế t k ế gi ỏ hàng ................................................................... 244

5. 4.1. Th ự c hi ệ n t ầ ng d ữ li ệ u ........................................................ 244

11

5.4.2. T ầ ng x ử lý d ữ li ệ u................................................................ 247

5.4.3. T ầ ng x ử lý giao di ệ n ngƣờ i dùng......................................... 254

B. TH Ự C HÀNH................................................................................... 270

1. N ộ i dung th ự c hành ....................................................................... 270

2. B ả ng v ật tƣ thiế t b ị c ầ n thi ế t.......................................................... 270

3. Quy trình th ự c hi ệ n công vi ệ c ....................................................... 270

4. T ổ ch ứ c th ự c hi ệ n .......................................................................... 271

5. Ki ểm tra đánh giá .......................................................................... 271

BÀI T Ậ P BÀI 3..................................................................................... 272

TÀI LI Ệ U THAM KH Ả O......................................................................... 277

12

MỤC TIÊU.

- Định hƣớng đƣợc cách thiết kế Website.

- Thiết kế đƣợc giao diện Website.

- Có khả năng sử dụng dụng các thẻ HTML.

- Biết cách tổ chức thông tin trên trang chủ.

- Sử dụng thành thạo các công cụ thiết kế Web.

- Xây dựng đƣợc các ứng dụng Multimedia.

- Cài đặt, cấu hình đƣợc dịch vụ IIS.

- Lập trình cơ bản website, kết hợp với cơ sở dữ liệu để tạo ra các

trang Web động.

NỘI DUNG CỦA MÔ ĐUN

Thời gian

Lý Thực Kiểm

thuyết hành

Số

Tên các bài trong mô đun

Tổng

số

TT

tra

1

2

Tổng quan về thiết kế web

Thiết kế web tĩnh với

Dreamweaver.

12

6

5

1

48

16

30

2

3

Thiết kế web động

Cộng

60

20

38

2

120

42

73

5

Phương pháp đánh giá

- Đƣợc đánh giá qua bài viết, kiểm tra vấn đáp hoặc trắc nghiệm, tự

luận: nắm rõ các bƣớc quy trình xây dựng Web, viết đúng cú pháp câu

lệnh khi lập trình Web động.

- Dựa trên năng lực thực hành thiết kế đƣợc một ứng dụng Web tĩnh,

xây dựng đƣợc một ứng dụng Web thông qua các ngôn ngữ lập trình, sử

dụng đƣợc các đối tƣợng lập trình, liên kết đƣợc các Cơ sở dữ liệu.

13

BÀI 1 : TỔNG QUAN VỀ THIẾT KẾ WEB

Mục tiêu :

- Hiểu được lịch sử của WWW.

- Hiểu được các khái niệm cơ bản về WWW

- Hiểu được cấu trúc của một trang HTML.

- Có khả năng thiết kế được giao diện.

- Biết cách tổ chức được thông tin trong trang chủ.

- Thực hiện các thao tác an toàn với máy tính.

1. Lịch sử WWW.

Để hiểu đƣợc lịch sử của WWW điều quan trọng là phân biệt đƣợc sự

khác nhau giữa WWW và Internet. Internet là mạng của các mạng, kết nối

hàng triệu máy tính trên toàn cầu lại với nhau, hình thành một hệ thống mà

trong đó bất cứ máy tính nào cũng có thể liên lạc với các máy tính khác khi

chúng đang cùng đƣợc kết nối vào Internet. Còn WWW (viết tắt từ World

Wide Web - Web rộng khắp thế giới - gọi tắt là Web) là dịch vụ trao đổi,

tìm kiếm và truy cập thông tin trên mạng theo giao thức HTTP ( Hyper

Text Tranfer Protocol). WWW đƣợc sử dụng thông qua trình duyệt Web.

Nhƣ vậy WWW chỉ là dịch vụ phổ biến nhất của Internet. Ngoài WWW,

Internet còn có các dịch vụ khác nhƣ Email (thƣ điện tử), FTP (File

Transfer Protocol - truyền tải tệp tin ), CHAT (tán gẫu),...

Cha đẻ của WWW chính là viện sĩ Viện Hàn lâm Anh Tim Berners-

Lee. Vào năm 1980, Tim Berners Lee khi đang làm kỹ sƣ phần mềm cho

CERN (phòng thí nghiệm vật lý hạt của châu Âu tại Geneva), thấy các

đồng nghiệp phải vất vả trong việc tra cứu tài liệu, Ông bắt đầu viết phần

mềm Enquire (viết tắt của Enquire Within Upon Everything - tạm dịch là

tra khảo mọi thứ). Với phần mềm này, Tim Berners-Lee tạo ra một loại sổ

tay “siêu văn bản”: Các từ trong tài liệu đƣợc nối kết với các file khác trong

máy tính của ông và ông có thể lần theo nối kết này bằng số (lúc này chƣa

tồn tại con chuột để nhấp) và tự động truy ra tài liệu liên đới. Phần mềm

này hoạt động hoàn hảo. Vấn đề đặt ra là ông muốn thực hiện điều tƣơng tự

trên các máy tính khác trên mạng. Năm 1989, cùng với Robert Cailliau

(ngƣời Bỉ ), Tim Berners Lee đã đề xuất dự án thiết kế hệ thống thông tin

toàn cầu World Wide Web (WWW) dựa trên ý tƣởng siêu văn bản để cho

phép mọi ngƣời dễ dàng chia sẻ công việc của họ qua mạng máy tính. Mặc

14

dù ít đƣợc mọi ngƣời quan tâm đến, ông vẫn tiếp tục phát triển ba thành

phần chính cho các trang web là HTTP, HTML và trình duyệt web. Mới

đầu, Tim Berners Lee phát triển hệ thống siêu văn bản để theo dõi hàng

trăm dự án, phần mềm, máy tính đang sử dụng của khoa Vật lý năng lƣợng

cao của CERN. Dùng máy tính NeXT, ông làm nên một trình duyệt thô sơ

vào mùa thu năm 1990 tên là World Wide Web ( sau đổi tên là Nexus).

Ngày 06 tháng 8 năm 1991, ông và Cailliau tạo ra đƣợc nội dung trang web

đầu tiên trên thế giới là danh bạ điện thoại của các nhân viên trong

CERN. Một b ả n copy c ủ a trang web v ẫ n còn t ồ n t ạ i.

Web đã bùng nổ vào năm 1993 khi một sinh viên tốt nghiệp trƣờng

Đại học Illinois tên là Marc Andreessen phát triển thành công một phần

mềm giúp hiển thị các trang Web dƣới dạng đồ hoạ. Phần mềm này đƣợc

gọi là Mosaic, một “trình duyệt” cho phép ngƣời sử dụng có thể hiển thị

hình ảnh cũng nhƣ văn bản trên các trang web. Từ đó, web và Internet cùng

hợp nhất nhau để phát triển với tốc độ chóng mặt. Chúng ta có thể điểm

một số sự kiện tiêu biểu nhƣ sau:

- Ngày 30-4-1993: CERN công bố World Wide Web miễn phí cho tất

cả mọi ngƣời. Tim Berners Lee đã thuyết phục đƣợc Cern “cho không”

công nghệ web và các mã chƣơng trình để mọi ngƣời đều có thể sử dụng và

cùng tham gia phát triển. Đây là một trong những nguyên nhân chủ yếu

giúp cho web phát triển nhanh chóng và mạnh mẽ.

- Tháng 5-1993: Viện công nghệ Massachusetts lần đầu tiên đƣa một

tờ báo lên web.

- Tháng 6-1993: Ngôn ngữ HTML (Hypertext Mark Language) dùng

trong lập trình web đƣợc công bố.

- Tháng 11-1993: Webcam đầu tiên đƣợc kết nối.

- Tháng 2-1994: Tiền thân của Yahoo đƣợc đƣa lên internet.

- Tháng 4-1994: BBC mở website đầu tiên cho chƣơng trình Ti vi: The

Net

- Ngày 13-10-1994: Bill Clinton đƣa Nhà Trắng lên web

- Tháng 2-1995 : Radio HK chính thức trở thành một đài phát thanh

trực tuyến “fulltime”.

- Ngày 1-7-1995: Hiệu sách trực tuyến Amazon khai trƣơng.

- Ngày 9-8-1995: “Bùng nổ tên miền .com”. Hàng loạt công ty trực

tuyến chính thức mở cửa website của mình.

15

- Ngày 24-8-1995: Microsoft Internet Explorer (IE) đƣợc phát hành và

là một phần trong Windows 95.

- Ngày 4-9-1995: EBay, website đấu giá trực tuyến đầu tiên đƣợc

thành lập.

- Ngày 15-12-1995: Alta Vista, công cụ tìm kiếm đa ngôn ngữ đầu tiên

ra mắt ngƣời sử dụng Internet.

- Ngày 4-7-1996: Hotmail khai trƣơng.

- Ngày 17-12-1997: Jorn Barger đƣa ra khái niệm weblog, sau này rút

gọn thành blog.

- Tháng 9-1998: Gã khổng lồ Google mở cửa văn phòng đầu tiên của

mình.

- Ngày 16-8-1999: Everquest trở thành game nhập vai trực tuyến nhiều

ngƣời chơi (MMORPG) đầu tiên.

- Ngày 19-8-1999: MySpace khai trƣơng. Đây là một trong những

website đầu tiên về lƣu trữ trực tuyến.

- Tháng 11-1999: Boo.com trở thành site đầu tiên kinh doanh thời

trang.

- Ngày 2-7-2000: Hacker đánh sập 8 website lớn trong đó có Yahoo,

CNN và Amazon.

- Ngày 15-1-2001: Jimmy Wales sáng lập Bách khoa toàn thƣ trực

tuyến Wikipedia.

- Ngày 22-11-2001: Giáo hoàng John Paul II gửi bức thƣ điện tử đầu

tiên từ chiếc laptop trong phòng làm việc của ông.

- Ngày 11-12-2002: FBI bắt đầu đăng tin truy nã tội phạm trực tuyến.

- Ngày 28-4-2003: Apples đƣa dịch vụ tải nhạc iTunes vào hoạt động.

- Tháng 7-2004: Tim Berners Lee đƣợc phong tƣớc hiệp sĩ.

- Ngày 4-2-2004: Zuckerberg thành mạng xã hội Facebook.

- Ngày 9-11-2004: Mozilla Firefox ra mắt công chúng

- Tháng 2-2005: Website chia sẻ video youtube.com ra đời

.....

Dù rằng trƣớc đây, Web toàn cầu chỉ có thể hỗ trợ cho dạng văn bản

và các đồ hoạ cơ bản thì ngày nay, Web đã có khả năng hỗ trợ cho một số

lƣợng đáng kinh ngạc các loại phƣơng tiện khác nhau. Nhiều trang Web

hiện nay chứa đựng cả các hình động, âm thanh, phim ảnh và các ứng dụng

vận hành nhƣ các phần mềm vi tính thông thƣờng. Thông thƣờng, các trình

16

duyệt Web nhƣ Netscape Navigator và Microsoft Internet Explorer có hỗ

trợ cho cả các nội dung này, nhƣng trong một số trƣờng hợp, bạn sẽ phải tải

về máy phần mềm đặc biệt gọi là plug-in để giúp trình duyệt nhận dạng

đƣợc chúng.

Ngày nay, với nhiều tỷ trang Web và ngày càng sinh sôi nảy nở, Web

đã trở thành một vũ trụ thông tin có thể truy xuất qua mạng, một hiện thân

của tri thức nhân loại, và một kho tri thức của loài ngƣời.

2. Các khái niệm cơ bản

2.1. Web Server, Web Browse

Hệ thống web là một phần của Internet bao gồm nhiều máy Web

Server (máy chủ web) trên khắp thế giới. Các Web Server này lƣu trữ các

trang web, cho phép mà ngƣời dùng ở bất kỳ đâu cũng có thể truy cập.

Web Server cũng chỉ là một máy tính đƣợc nối vào Internet. Nhƣng nó

đƣợc kết nối Internet liên tục (24/24 giờ) và cài đặt các hệ điều hành, các

phần mềm chuyên dụng (Apache, Internet Information Services) đáp ứng

các nhu cầu truy cập web từ phía ngƣời sử dụng. Web Server thƣờng là

máy tính có cấu hình cao, khả năng hoạt động ổn định, tốc độ đƣờng truyền

cao để có thể đáp ứng nhiều yêu cầu truy cập đồng thời từ nhiều ngƣời sử

dụng.

Web Browser còn gọi là trình duyệt web, đƣợc sử dụng bởi ngƣời

dùng trên máy khách. Nhiệm vụ của trình duyệt web là khai thác các dịch

vụ web. Ngƣời dùng yêu cầu một trang tài liệu bằng cách gõ một

URL(Uniform Resource Location: Địa chỉ truy cập của trang Web)

vào khung Address của trình duyệt. Trình duyệt gửi thông tin này tới Web

Server. Web Server sử dụng thông tin trong URL để xác định và cho hiển

thị trang Web theo yêu cầu của Web Browser. Nếu là các trang web động,

Web Server sẽ xử lý các thông tin và trả kết quả về cho ngƣời dùng. Các

trình duyệt phổ biến hiện nay là (Internet Explorer), Netscape, Opera,

Google Chrome, Firefox,…

2.2. Website, Web page, Static page, Dynamic page.

Ngày nay ngƣời ta dùng máy tính nhƣ một công cụ rất hữu ích để truy

nhập Internet, chủ yếu là tìm kiếm thông tin. Vấn đề đặt ra là làm thế nào

để mọi ngƣời có thể dễ dàng sử dụng máy tính nhƣ một công cụ phục vụ

đắc lực cho việc tra cứu tìm kiếm thông tin trên mạng Internet. Việc này trở

17

nên dễ dàng hơn bởi ý tƣởng siêu văn bản (Hypertext). Siêu văn bản là các

văn bản “thông minh” giúp ngƣời xem có thể tìm các tài liệu liên quan.

Trong thế giới siêu văn bản, nội dung thông tin không còn bị bó hẹp trong

một trang văn bản mà nó còn đƣợc mở rộng bằng cách tham khảo, liên kết

tới nhiều tài liệu khác (hình ảnh, âm thanh, hoạt hoạ…). Ngƣời xem có thể

dễ dàng đi từ tài liệu này sang tài liệu khác thông qua các mối liên kết. Họ

có thể du lịch trong xa lộ thông tin phong phú trong khi vẫn ngồi tại nhà.

Họ không phải sang tận Louvre ở Paris mà vẫn có thể chiêm ngƣỡng đƣợc

các kiệt tác hội hoạ. Chính nó đã góp phần tạo ra bƣớc phát triển bùng nổ

của Internet trong những năm gần đây.

Để phổ biến thông tin trên toàn cầu, cần một ngôn ngữ phổ biến và dễ

hiểu mà toàn bộ các máy tính có thể hiểu đƣợc. Ngôn ngữ phổ biến dùng

bởi WWW là HTML (Hyper Text Markup Language - ngôn ngữ đánh dấu

siêu văn bản). Các trang Web đầy sinh động mà bạn thấy trên World Wide

Web là các trang siêu văn bản đƣợc viết bằng ngôn ngữ đánh dấu siêu văn

bản hay HTML. HTML cho phép bạn tạo ra các trang web phối hợp hài

hoà văn bản thông thƣờng với hình ảnh, âm thanh, video và các mối liên

kết đến các trang siêu văn bản khác...

Tên gọi ngôn ngữ đánh dấu siêu văn bản phản ánh đúng thực chất của

công cụ này:

-

Đánh dấu (Markup): HTML là ngôn ngữ của các thẻ đánh dấu –

Tag. Các thẻ này xác định cách thức trình bày đoạn văn bản tƣơng ứng trên

màn hình.

-

Ngôn ngữ (Language): HTML là một ngôn ngữ tƣơng tự nhƣ các

ngôn ngữ lập trình, tuy nhiên đơn giản hơn. Nó có cú pháp chặt chẽ để viết

các lệnh thực hiện việc trình diễn văn bản. Các từ khoá có ý nghĩa xác định

đƣợc cộng đồng Internet thừa nhận và sử dụng. Ví dụ b = bold, ul =

unordered list, ...

-

Văn bản (Text): HTML đầu tiên và trƣớc hết là để trình bày văn

bản và dựa trên nền tảng là một văn bản. Các thành phần khác nhƣ hình

ảnh, âm thanh, hoạt hình.. đều phải "cắm neo" vào một đoạn văn bản nào

đó.

- Siêu văn bản (Hyper): HTML cho phép liên kết nhiều trang

văn bản rải rác khắp nơi trên Internet. Nó có tác dụng che giấu sự phức tạp

của Internet đối với ngƣời sử dụng. Ngƣời dùng Internet có thể đọc văn bản

18

mà không cần biết đến văn bản đó nằm ở đâu, hệ thống đƣợc xây dựng

phức tạp nhƣ thế nào. HTML thực sự đã vƣợt ra ngoài khuôn khổ khái

niệm văn bản cổ điển.

Trang mã nguồn HTML là một tệp văn bản bình thƣờng gồm các kí tự

ASCII, có thể đƣợc tạo ra bằng bất cứ trình soạn thảo thông thƣờng nào.

Theo quy ƣớc, tất cả các tệp mã nguồn của trang siêu văn bản phải có đuôi

là “.html” hoặc “.htm”. Khi trình duyệt Web đọc trang mã nguồn HTML,

nó sẽ dịch các thẻ lệnh và hiển thị lên màn hình máy tính thì ta thƣờng gọi

là trang Web (Web Page). Vậy trang Web là cái thể hiện của trang mã

nguồn qua việc xử lý của trình duyệt. Nhƣ sau này ta sẽ thấy, các trình

duyệt khác nhau có thể hiển thị cùng một trang mã nguồn không hoàn toàn

giống nhau. Tạo trang Web tức là tạo ra trang mã nguồn HTML đúng quy

định để trình duyệt web hiểu đƣợc và hiển thị đúng.

Để tạo đƣợc trang web ta có thể sử dụng những công cụ (phần mềm)

thô sơ nhất nhƣ Notepad của Windows hoặc những công cụ cao cấp dành

riêng cho việc thiết kế web nhƣ Dreamweaver, FrontPage, Flash, ASP,

PHP…).

Web tĩnh (Static Page) : Là trang web đã đƣợc chuẩn bị sẵn cho các

yêu cầu nhất định và nội dung của nó ít thay đổi. Web tĩnh có tính chất sau:

- Dễ phát triển.

- Tƣơng tác yếu.

- Sử dụng HTML, do đó ngƣời làm Web tĩnh thƣờng dùng các công

cụ trực quan để tạo ra trang Web.

- Để cập nhật nội dung, cần phải đƣợc thực hiện bởi ngƣời có kiến

thức về HTML và không sửa chữa trực tiếp trên trình duyệt Web.

Web động (Dynamic Page): Là trang web có các tính chất sau:

- Khó phát triển hơn Web tĩnh.

- Tƣơng tác mạnh.

-

Thiết kế bằng việc kết hợp HTML và mã lệnh. Thông thƣờng trang

web động sử dụng các ngôn ngữ lập trình nhƣ ASP, ASP.NET, PHP, JSP...

để kết nối với các cơ sở dữ liệu (database) nhƣ Microsoft-Access, SQL

Server, MySQL,... Mã lệnh đƣợc thực thi trên Server và trả về kết quả

HTML cho ngƣời sử dụng thông qua các trình duyệt Web.

- Có thể cập nhật dữ liệu thƣờng xuyên, dễ dàng thông qua trình

19