Bài giảng Thiết kế Web - Chương 1: Giới thiệu về Internet và Website - Trần Phi Hảo

THIẾT KẾ WEB 
GV: TRẦN PHI HẢO 
KHOA: KHOA HỌC MÁY TÍNH 
TRƯỜNG CĐ CNTT HỮU NGHỊ VIỆT – HÀN 
Email: haovyy@gmail.com 
THIẾT KẾ WEB 
CHƯƠNG I: 
Giới thiệu về Internet và website 
I.1. Giới thiệu 
	 I.1.1 Giới thiệu về Internet 
	I.1.2 Dịch vụ Word wide web 
	I.1.3 Giới thiệu HTML, Javascript 
I.2. Các nguyên tắc thiết kế Website 
I.1.1.1 Mạng máy tính 
I.1.1 Giới thiệu về Internet 
I.1.1.2 Mạng Thông tin toàn cầu 
Được phát minh bởi Tim Berners Lee (1989, CERN, CH) 
“cho phép xem bất kì thông tin nào có thể truy cập được trên mạng bằng định danh tài nguyên toàn cầu đơn duy nhất” 
1990 – Trình soạn thảo siêu văn bản 
1991 – Máy chủ Web server (info.cern.ch),và trình duyệt web văn bản ra đời 
1993 – Trình duyệt Mosaic phát triển bởi NCSA 
1994 – Hội đồng World Wide Web (W3C) được sáng lập; 
I.1.1.3 Lịch sử 
Giới thiệu: 
WWW là hệ thống các website toàn cầu, trong đó các web site liên kết với nhau thông qua các siêu liên kết 
Một hay nhiều web site được đặt tại các web server, xác định thông qua địa chỉ IP hay tên miền của web server đó (sử dụng DNS để phân giải tên miền thành IP tương ứng) 
Tính chất: Là dịch vụ thông tin đa phương tiện, phân tán dựa trên nền tảng siêu văn bản. 
Phân tán: Thông tin được đặt trên nhiều host khắp thế giới. 
Đa phương tiện: văn bản, hình ảnh, âm thanh, video 
Siêu văn bản: Các kỹ thuật siêu văn bản cho phép truy cập thông tin thông qua các định danh tài nguyên 
Mục đích: Cung cấp truy cập đến các tài nguyên mạng 
Các tài nguyên Web cũng như FTP, News, 
Kết hợp nhiều dịch vụ với nhau. 
I.1.2 Dịch vụ World Wide Web (WWW) 
Giới thiệu: Là tập hợp các tài liệu hay trang web (web page) được liên kết với nhau thông qua các siêu liên kết. 
Tổ chức website: Cách bố trí các tài liệu, trang web 
Cung cấp cái nhìn tổng thể, rõ ràng về trang web 
Kết hợp trang web thành một chủ đề 
Cách thức tổ chức website: 
Thông qua thư mục con 
Thông qua các liên kết để kết nối các trang hợp lý 
I.1.2.1 Website 
01/01/2022 
8 
I.1.2.2 Tổ chức website 
Giới thiệu: 
Là trang mặc định của một web site khi người dùng truy cập vào website đó thông qua tên miền hoặc IP của web server chứa website 
Do người phát triển web thiết lập, có thể là các trang index.html, index.php, main.php, 
Trang chủ chứa các liên kết đến các trang khác của web site 
I.1.2.3 Tổ chức website – Trang chủ 
Ví dụ về một trang chủ 
Web = giao thức + ngôn ngữ + kiến trúc đặt tên 
Giao thức HTTP - HyperText Transport Protocol 
Xác định truyền thông giữa máy chủ và client 
Ngôn ngữ xây dựng trang web HTML - HyperText Markup Language 
Ngôn ngữ đánh dấu để chuẩn bị cho các tài liệu web 
Kiến trúc đặt tên URL - Uniform Resource Locator 
URL của một tài nguyên cho phép xác định tài nguyên thông qua tên miền và tên tài liệu chứa trong website 
URL của một tài nguyên là duy nhất 
I.1.2. 4 Các khái niệm cơ bản 
Thành phần chính: clients, servers, proxies 
Thành phần khác: gateways, caches,  
client = phần mềm người dùng; gửi các yêu cầu, thể hiện các đáp ứng. 
server = xử lý các yêu cầu và gửi các tài nguyên được yêu cầu 
proxy = đóng vai trò trung gian cho server và client 
cache = Chứa các bản sao tạm thời của tài nguyên để tiết kiệm băng thông và đảm bảo thời gian đáp ứng tốt hơn. 
I.1.2.5 Thành phần phần mềm của WWW 
I.1.2.6 Hoạt động của web 
users (clients) browse 
Internet 
(WWW) 
WWW servers 
authors write HTML 
 
 
resources (HTML files) 
I.1.2.7 Hoạt động với proxy 
servers 
proxy 
clients 
Phần mềm người dùng 
Đảm nhận việc thiết lập kết nối đến server để gửi các yêu cầu và xử lý các đáp ứng 
Phân loại: 
Câu lệnh telnet www.srce.hr 80 
Trình duyệt (MS IE, Mozilla, Chrome, Amaya, ...) 
spider/robot hay các chương trình khác có thể liên lạc với server 
I.1.2.8 Client 
Lấy và thể hiện nếu có thể nhiều nguồn tài nguyên khác nhau. 
Có thể là: 
Văn bản (Lynx, ...) 
Đồ họa(MSIE, Mozilla, ...) 
Các trình duyệt khác nhau có thể thể hiện thông tin về các tài liệu HTML khác nhau 
Có thể thể hiện các tài liệu chuẩn và các tài liệu bổ sung (add on) 
TEXT, GIF, JPEG, flash... 
I.1.2.9 Browser 
Hỗ trợ đa giao thức 
HTTP, FTP, LDAP, GOPHER, NNTP, SMTP, POP, ... 
Có thể sử dụng các ứng dụng bổ sung (plugins) để xử lý các dạng định dạng dữ liệu (sound, video, postscript, MS applications, ...) 
Có cache riêng để lưu trữ các file tạm thời, lịch sử duyệt web, bookmark, địa chỉ tên miền trên ổ đĩa và RAM  
I.1.2.9 Browser 
Được sử dụng để đặt các website, truy cập thông qua địa chỉ IP hay tên miền 
Một chương trình có nhiệm vụ: 
Phản hồi cho một kết nối TCP đến và cung cấp tài nguyên, dịch vụ cho client. 
Kết nối đến các server cơ sở dữ liệu, server ứng dụng khác. 
Web site = host + Web server + các tài liệu (được truy cập qua hệ thống tập tin) 
Ví dụ: IIS, Apache, Tomcat 
I.1.2.10 Server 
Đóng vai trò trung gian giữa client và server 
Thực hiện các truy vấn cho client 
Truy vấn có thể được định hướng hay hiệu chỉnh 
Thường được tích hợp chức năng cache 
Chức năng: 
Gửi các yêu cầu từ nhiều client đến server 
Lưu trữ đệm 
Chuyển đổi các yêu cầu/ đáp ứng 
Lọc các yêu cầu/ đáp ứng 
I.1.2.11 Proxy 
URL là định danh duy nhất cho các tài nguyên trên Internet 
Xác định: 
Các thức truy cập tài nguyên giao thức 
Xác định vị trí chứa tài nguyên máy tính + tài liệu 
Cú pháp 
protocol://host_name[:port_num][/path][/file_name] 
Ví dụ: 
I.1.2.12 URL – Định danh tài nguyên Internet 
Giao thức mức ứng dụng 
Không trạng thái 
Mục đích 
Sử dụng URL để truy cập tài nguyên Internet 
Truy cập các tài nguyên đa phương tiện khác (MIME types: RFC2045-RFC2049) 
Cho phép truy cập nhiều định dạng dữ liệu khác nhau 
HTTP/1.0 (RFC 1945), HTTP/1.1 (RFC 2616, 06.99.) 
I.1.2.13 HTTP 
 giao thức máy chủ server cổng thư mục/ tài liệu trên server 
ư mục/tài liệu.html 
Yêu cầu đơn giản phía client (sử dụng lệnh) 
telnet www.srce.hr 80 
Trying 161.53.2.69... 
Connected to regoc.srce.hr. 
Escape character is '^]'. 
GET /index.html HTTP/1.0 
ACCEPT: */* 
USER-AGENT: manually entered HTTP 
(blank line) 
I.1.2.14 Truyền thông giữa Client - server 
Server phản hồi: 
HTTP/1.0 200 OK 
Date: Tue, 29 Jul 1997 12:56:15 GMT 
Server: Apache/1.1.3 
Content-type: text/html 
Content-length: 2320 
Last-modified: Fri, 22 Nov 1996 10:07:27 GMT 
(blank line) 
(content - document source) 
I.1.2.14 Truyền thông giữa Client - server 
I.1.2.15 Giao tác thông thường trên WWW 
browser 
DNS server 
URL 
origin server 
1.Tìm kiếm 
DNS 
2. Kết nối TCP 
3. HTTP request 
4. HTTP response 
Các kết nối khác 
- 25 - 
 HTML là viết tắt của "Hyper Text Markup Language" (Ngôn ngữ tiền xử lý siêu văn bản). 
 Hyper Text – Văn bản có thể kết nối với văn bản khác. 
 HTML là một ngôn ngữ web cơ bản và không thể thiếu trong 1 trang web. 
 Một file HTML là một file văn bản chứa đựng những thẻ (tag) đánh dấu. 
 Các thẻ này giúp trình duyệt những mô tả để trình bày trang.  
I.1.3.1 HTML 
I.1.3 Giới thiệu về HTML & JavaSctipt 
- 26 - 
 Một file HTML có phần mở rộng là .htm hoặc . html . 
 Một file HTML có thể được tạo ra bằng cách sử dụng các chương trình xử lý văn bản đơn giản nhất: notepad, wordpad... Đến phức tạp hơn một chút như: ultraedit, ..etc. 
 Bất kỳ thẻ lệnh nào của HTML đều được vào giữa 2 dấu "" 
I.1.3.1 HTML 
- 27 - 
 Nếu sử dụng hệ điều hành Windows, hãy mở trình Notepad. 
 Nếu là hệ điều hành Mac, hãy khởi động trình Simple Text. 
 Trong OSX thì chọn trình TextEdit. 
 Mở cửa sổ “Preferences” phía dưới mục chọn “Text Edit” và chọn “Ignore rich text commands in HTML files”. 
 Lưu ý rằng nếu không có những thay đổi trên thì đoạn mã HTML của bạn sẽ không thực hiện được . 
I.1.3.2 Các bước soạn tài liệu HTML 
Nhập đoạn văn bản sau: 
   Tiêu đề của trang 
   Đây là trang web đầu tiên Nội dung được tô đậm 
Lưu tập tin trên vào ổ đĩa với tên .htm 
I.1.3.2 Các bước soạn tài liệu HTML 
báo cho trình duyệt biết bắt đầu tập tin HTML 
báo cho trình duyệt biết kết thúc tập tin HTML 
Là nơi ghi chú, miêu tả về site, đây là nơi mà bạn có thể định dạng trang, sử dụng các thẻ META 
sẽ là tiêu đề của trang và được hiển thị trên thanh tiêu đề của trình duyệt 
Phần chính của trang web được bắt dầu bằng thẻ và kết thúc bằng thẻ 
 Khi lưu một tập tin HTML, bạn có thể lưu với đuôi mở rộng .htm hoặc .html. 
 Trong ví dụ trước, ta đã lưu tập tin mypage với đuôi mở rộng là .htm. 
 Lí do có thể là do thói quen cũ, trước đây thông thường hầu hết các phần mềm đều chỉ chấp nhận đuôi mở rộng gồm 3 chữ cái. 
 Đối với các phần mềm mới sau này, bạn nên sử dụng đuôi mở rộng là .html thì an toàn hơn. 
I.1.3.3 Phần mở rộng là .htm hay .html 
Câu hỏi thường gặp 
Câu hỏi: Sau khi tôi đã chỉnh sửa một file HTML, nhưng tôi không thể xem được kết quả ở trình duyệt. Tại sao vậy? 
Trả lời: Bạn phải chắc rằng bạn đã lưu file đó với phần mở rộng là .htm hoặc .html 
Câu hỏi: Tôi đã thử chỉnh sửa file HTML của tôi nhưng lại không thấy thay đổi gì ở trình duyệt cả. Tại sao vậy? 
Trả lời: Trình duyệt tự động cach trang của bạn do đó nó không phải đọc cùng một trang hai lần. Khi bạn thay đổi gì đó ở một trang, trình duyệt nó không thể nhận ra được những thay đổi đó. Sử dụng nút refresh hoặc reload của trình duyệt để bắt nó đọc lại những thay đổi bạn tạo ra 
I.2 Nguyên tắc thiết kế 
Xác định mục đích website 
Cá nhân:  
Kinh doanh thương mại:  
Cơ quan, doanh nghiệp 
Tổ chức phi lợi nhuận:  
Giáo dục:  
Giải trí:  
31 
Xác định đọc giả chính (đối tượng sử dụng) 
Nhu cầu 
Mối quan tâm 
Trình độ 
Điều kiện về công nghệ (máy tính, phần mềm, tốc độ xử lý, băng thông Internet,) 
32 
Phân loại máy chủ 
Nhà cung cấp dịch vụ Internet (ISP) 
Máy chủ dành cho mục đích giáo dục 
Máy chủ riêng của doanh nghiệp 
Máy chủ cá nhân 
I.2 Nguyên tắc thiết kế 
Dạng dữ liệu 
Dạng text 
Graphics 
Video 
Applets 
Sound 
Biểu mẫu hoặc các hình thức lấy thông tin khảo sát từ người dùng 
33 
I.2 Nguyên tắc thiết kế 
Xác định các thông tin đưa lên trang chủ 
Giới thiệu chủ thể (chủ trang web) 
Chức năng, nhiệm vụ hoặc sứ mệnh 
Địa chỉ liên lạc 
Thông báo ngày giờ cập nhật tin tức 
Thông báo về bản quyền 
Disclaimer – Từ chối sự ràng buộc pháp lý (Ví dụ: “Chúng tôi cố gắng gửi các thông tin mới nhất lên trang web, tuy nhiên có thể có một số các thông tin không còn mang tính thời sự”, hoặc là “Thông tin này không mang ý nghĩa chứng thực cho bất kỳ một sản phẩm nào“, ..) 
34 
I.2 Nguyên tắc thiết kế 
Nếu website là website thương mại hoặc của các tổ chức doanh nghiệp, nên làm nổi bật các thông tin vê địa chỉ liên lạc, số điện thoại, email, slogan.Nếu website là website cá nhân, các thông tin trên không nên công khai vì lý do riêng tư. 
35 
Nội dung trang web 
Phù hợp với mục đích của trang web 
Được tổ chức chặt chẽ, rõ ràng 
Đúng ngữ pháp, chính tả 
Xem xét khả năng thể hiện bằng phiên bản tiếng Anh (hoặc các ngoại ngữ khác) tùy theo nhu cầu của đối tượng sử dụng. 
Nội dung phải được cập nhật 
Nội dung phải phù hợp với trình độ đối tượng sử dụng 
I.2 Nguyên tắc thiết kế 
Công nghệ (kỹ thuật) tạo trang web phù hợp với nội dung và mục đích 
Mức đơn giản: chủ yếu dạng text, ít hình ảnh, ít chiếm bộ nhớ 
Mức trung bình: chứa một số hình ảnh và các thể loại khác, dễ tải xuống, nhưng không quá đơn giản 
Mức cao: Có nhiều hình ảnh , animation, java applets, "art" text, video clips, .chiếm nhiều tài nguyên, thời gian tải chậm. 
36 
I.2 Nguyên tắc thiết kế 
Phong cách (Style) 
Chuyên nghiệp: www.microsoft.com/silverlight/default.aspx 
Hàn lâm, khoa học: www.ieee.org 
Thông thường: www.vnn.vn 
Trẻ thơ: www.kidgardens.com 
Teen: www.teen.vn 
Nghệ thuật: www.artinstitutes.edu 
37 
I.2 Nguyên tắc thiết kế 
Thiết kế - đồng nhất, rõ ràng, thân thiện 
Sử dụng "back to home" link  
Sử dụng một loại template đồng nhất 
Tạo ra một biểu đồ màu đồng bộ (với tông màu hạn chế) 
Đảm bảo độ tương phản vừa phải giữa mà nền và các chữ (text) 
Tránh sử dụng các font chữ quá lớn hoặc quá nhỏ 
Đặt các thông tin quan trọng ở phía trên cùng 
Tránh sử dụng các các liên kết (link) hàng loạt.  
Chia danh sách thành các khối nhỏ và phân cách bằng các dải 
Sử dụng bảng liệt kê nội dung có gắn các liên kết để truy cập đến các thông tin trong một trang có nội dung dài 
Sử dụng thanh cuộn để tìm nội dung 
38 
I.2 Nguyên tắc thiết kế 
Kích thước (độ phân giải) website 
Kích thước chuẩn là 800x600. Nếu chúng ta sử dụng kích thước lớn hơn thì phải sử dụng thanh cuộn để xem toàn bộ nội dung trang web. 
Đồ họa 
Hình ảnh dạng .jpg có chất lượng hình ảnh cao.  
Hình ảnh dạng .gif (hình ảnh, buttons, clip art). 
Animated .gif files: hình ảnh động, tuy nhiên phải cân nhắc có phù hợp hoặc làm phân tác ý tưởng truyền đạt chính hay không? 
Flash animation (có cả chức năng "turn off" flash).  
39 
I.2 Nguyên tắc thiết kế 
Màu nền và màu chữ. 
Cân nhắc trường hợp màu nền sặc sỡ sẽ ảnh hưởng đến việc đọc text. 
Tạo sự tương phản giữa màu nền và chữ. 
Hạn chế việc sử dụng màu cho chữ. 
Các màu "Hot" (vd: màu hồng nhạt, màu cam) nói chung ít được sử dụng để làm màu chữ. 
Các màu chính (đỏ, xanh da trời, xanh lục) thường sử dụng cho các site dành cho trẻ em. 
Màu đen tạo cảm giác u ám hoặc phản cảm 
40 
I.2 Nguyên tắc thiết kế 
Sử dụng Frame (ngày nay ít được sử dụng) 
Khó khăn trong việc làm dấu trang web (bookmark) 
Khó định vị (navigate) 
Khó xác định khung trong trường hợp in ấn. 
Các máy tìm kiếm có thể không thể sắp xếp được nội dung trong các khung 
Cố gắng cung cấp khả năng truy cập ở các trình duyệt khác nhau: Internet Explorer, Firefox, 
41 
I.2 Nguyên tắc thiết kế 
Bảo vệ sự riêng tư và danh tiếng cá nhân 
Không nên cung cấp thông tin cá nhân của mình hoặc của người khác. 
Không nên cung cấp số điện thoại nhà hoặc số di động. 
Các liên kết trên trang web của bạn có thể giúp xác định được bạn là ai và tổ chức doanh nghiệp mà bạn tham gia. 
Tránh việc phóng đại hoặc cường điệu thông tin khi quảng cáo về một sản phẩm hay một tổ chức. 
Chỉ rõ nguồn trích dẫn thông tin. 
Tuân thủ luật bản quyền. 
Nên sử dụng các hình ảnh gốc, được phép lưu hành. 
42 
I.2 Nguyên tắc thiết kế 
Vấn đề bản quyền 
Tuân theo luật bản quyền 
Các vấn đề khác 
Có thể tạo liên kết đến hầu hết các website khác. Tuy nhiên, có một số cá nhân hoặc tổ chức ràng buộc điều kiện khi liên kết đến trang web của họ. 
43 
Chịu hoàn toàn trách nhiệm trước pháp luật trong các trường hợp sau: 
đưa nội dung của các cá nhân hoặc tổ chức khác lên trang web của bạn 
Sử dụng thông tin từ các nguồn khác từ Internet để làm nội dung của mình mà không chỉ rõ nguồn 
Sử dụng logo, biểu tượng và các hình ảnh từ các trang web khác mà không được phép của chủ thể 
I.2 Nguyên tắc thiết kế 
Cấu trúc website 
a. Cấu trúc ngang hàng 
b. Cấu trúc phân cấp 
44 
a. Cấu trúc ngang hàng 
Phương thức tổ chức này đặt các file ngang hàng nhau. Một thư mục gốc (root) được tạo ra và tất cả các file đều được lưu trong thư mục này. 
Cấu trúc website 
Đặc điểm 
Cấu trúc đơn giản 
Dễ tạo liên kết 
Phải đặt tên file đúng ý nghĩa của nó để tránh nhầm lẫn 
Khi số lượng file còn hạn chế (50 file dữ liệu và 30 file hình ảnh) việc tìm kiếm dễ dàng. Tuy nhiên, khi số lượng file tăng lên thì việc tổ chức theo hình thức này không hiệu quả 
45 
Cấu trúc website 
b. Cấu trúc phân cấp 
Sử dụng các thư mục cấp dưới bắt đầu từ thư mục gốc để chứa dữ liệu. Các file cùng kiểu (.GIF, .PDF) hoặc có liên quan nội dung (ví dụ: kế hoạch kinh doanh năm 2008) sẽ được nhóm lại trong một thư mục. 
46 
Cấu trúc website 
Đặc điểm 
Linh động 
Dễ dàng mở rộng cấu trúc 
Dễ quản lý 
47 
Cấu trúc website 
48 
Cấu trúc website 
49 
Các lưu ý khi thiết kế website 
Hạn chế việc bắt người đọc phải suy nghĩ 
Nội dung rõ ràng, có tính “tự giải thích” 
Ví dụ:  
50 
Các lưu ý khi thiết kế website 
Không làm mất thời gian người sử dụng khi người sử dụng muốn dùng thử dịch vụ hoặc công cụ của bạn 
51 
Các lưu ý khi thiết kế website 
Gây sự chú ý của đọc giả 
Thông thường hình ảnh tạo sự chú ý tốt hơn text 
Mắt người nhạy cảm với màu sắc, hình khối và chuyển động 
Ví dụ: 
Các lưu ý khi thiết kế website 
Cố gắng quảng bá hình ảnh một cách trực tiếp, dễ hiểu nhất 
Ví dụ:  
53 
Các lưu ý khi thiết kế website 
Sử dụng ngôn từ một cách hiệu quả 
Ví dụ:  
54 
Các lưu ý khi thiết kế website 
Không nên thiết kế phức tạp, cố gắng đơn giản hóa: Đây là một trong những lưu ý quan trọng khi thiết kế web 
Ví dụ: www.google.com 
Các lưu ý khi thiết kế website 
Sử dụng hiệu ứng của các khoảng trống để làm nổi bật các yếu tố chính 
Các lưu ý khi thiết kế website 
Truyền thông đến người sử dụng bằng ngôn ngữ hình ảnh (visual language): 3 nguyên tắc 
Tổ chức: cấu trúc phù hợp, đồng nhất,.. 
Hiệu quả: đơn giản, rõ ràng, dễ phân biệt và ấn tượng 
Truyền thông: tùy thuộc đối tượng sử dụng để kết hợp tốt các phương pháp truyền thông sử dụng màu sắc, hình ảnh, chữ viết, 
Mật độ các từ khoảng 18 từ/line hoặc 50 đến 80 ký tự/line 
57 
Các lưu ý khi thiết kế website 
Tạo niềm tin cho người sử dụng: Sử dụng ngôn ngữ theo vùng lãnh thổ, quốc gia,.. 
Ví dụ: www.google.com.vn 
58 
Kiểm thử 
Trong quá trình thiết kế, phải luôn luôn kiểm thử hoạt động và chỉnh sửa lỗi 
Kiểm tra việc truy cập từ phía người sử dụng trong trường hợp 1 user và nhiều user. 
I’m Diego Maradona 
The end