Bài giảng Thiết kế Web - Bài 1: Cơ bản về công nghệ WWW

8/2/2010
1
1
Bài 1. 
Cơ bản về công nghệ WWW
Đỗ Bá Lâm 
Viện CNTT&TT - ĐHBKHN
2
Mục đích
• Cung cấp cho Sinh viên kiến thức về cơ chế 
hoạt động của trang web
– Khái niệm siêu văn bản (hypertext)
– Máy chủ, trình duyệt web, giao thức hoạt động
8/2/2010
2
3
Nội dung
• 1. Khái niệm về siêu văn bản
• 2. Các thành phần của Web
– 2.1. Máy phục vụ, máy khách
– 2.2. WebServer, WebBrowser
– 2.3. Website, WebPage
– 2.4. URL
• 3. Phân loại trang Web
• 4. Một số điều cần chú ý trong phát triển Web
4
1. Khái niệm về siêu văn bản
• Hypertext? Hyperlink? Hypermedia?
• Hypertext: là văn bản (text) trên máy 
tính có sự liên kết đến một văn bản 
khác và có thể truy cập trực tiếp
thông qua click chuột, nhấn phím.
• Hyperlink: là một liên kết từ một file 
hypertext đến một file khác
• Hypermedia: là sự mở rộng của 
hypertext, trong đó đối tượng có thể 
là văn bản, đồ họa, âm thanh, video…
H1. Hypertext
8/2/2010
3
5
2. Các thành phần của Web
• Web (World Wide Web)?
Web là hệ thống các tài liệu hypertext liên kết 
với nhau thông qua mạng Internet
• Các thành phần của Web
– Web Page
– Web Site
– Uniform Resource Locator
– Web Server
– Web Browser
6
2.1. Máy phục vụ, máy khách
Máy khách (Client)
• Máy khai thác dịch vụ của máy 
chủ 
• Với mỗi dịch vụ, thường có 
các phần mềm chuyên biệt để 
khai thác
• Một máy tính có thể vừa là 
client vừa là server
8/2/2010
4
7
2.1. Máy phục vụ, máy khách
Máy phục vụ (Server)
• Là máy chuyên cung cấp các dịch vụ 
và tài nguyên cho các máy tính khác
• Thường cài các phần mềm chuyên 
dụng
• Một máy phục vụ có thể dùng cho 
một hay nhiều mục đích. 
– File server
– Application server
– Mail server
– Web server
8
2.2. Web Server, Web Browser
• Web Server
– Máy phục vụ web
– Một số phần mềm web server chuyên dụng:
• Apache, Internet Information Services (IIS)
• Web Browser
– Là phần mềm chạy trên Client
để khai thác dịch vụ Web
8/2/2010
5
9
2.2. Web Server, Web Browser
Tương tác giữa Web Server và Web Browser
10
2.3. WebPage, Website
• WebPage: 
– Là một trang Web
– Ngôn ngữ viết: PHP, ASP, 
ASP.Net… nhưng kết quả trả về 
cho Client là HTML
• Website:
– Là tập hợp các WebPage có nội 
dung thống nhất
8/2/2010
6
11
2.3. WebPage, Website
• Phân cấp trang Web
12
2.3. WebPage, Website
• Phân cấp quá “nông”
8/2/2010
7
13
2.3. WebPage, Website
• Phân cấp quá “sâu”
14
2.3. WebPage, Website
• Phân cấp hợp lý
8/2/2010
8
15
2.4. URL (Uniform Resource Locator)
• Địa chỉ IP (IP Address)
– Xác định một máy tính trong 
mạng dựa trên giao thức TCP/IP. 
Hai máy tính trong mạng có 2 địa 
chỉ IP khác nhau
– Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 
255)
– Ví dụ: google Việt Nam? 
64.233.189.147
– Địa chỉ Loop Back: 127.0.0.1
16
2.4. URL (Uniform Resource Locator)
• Tên miền (Domain name)
– Tại sao lại cần?
– Là tên gắn liền với một địa chỉ IP
– Ở dạng văn bản, thân thiện với 
người dùng
– Các cấp tên miền?
– Đánh số cấp từ bên phải, bắt đầu 
từ 1
– Ex: www.soict.hut.edu.vn
– Localhost: 127.0.0.1
8/2/2010
9
17
2.5. URL (Uniform Resource Locator)
• Cổng dịch vụ (Service Port)
– Tại sao lại cần?
– Một Server có thể cung cấp nhiều 
dịch vụ => cần sử dụng cổng để 
xác định dịch vụ cung cấp
– Mỗi dịch vụ thường chiếm những 
cổng mặc định
– HTTP: 80, FPT: 21, SMTP: 25, 
POP3: 110
18
2.5. URL (Uniform Resource Locator)
• Là chuỗi định vị tài nguyên trên Internet
Ví dụ: 
• Cấu trúc
giao thức://địa chỉ máy:cổng/đường dẫn đến tài nguyên
– Nhiều tham số có giá trị mặc định => có thể bỏ qua 
8/2/2010
10
19
3. Phân loại trang Web
• Web tĩnh
– Sử dụng HTML
– Tương tác yếu
• Web động
– Kết hợp mã HTML và mã lệnh
– Tương tác mạnh
– Mã lệnh được thực thi trên Server, trả về HTML 
cho Client
20
3. Phân loại trang Web
• So sánh
• Web tĩnh
– Dễ phát triển
– Nội dung thường cố định trên Browser
• Web động
– Khó phát triển hơn
– Có thể thay đổi nội dung trên Browser
– Các ngôn ngữ sử dụng đa dạng: PHP, ASP, 
ASP.NET..
8/2/2010
11
21
4. Một số điều cần chú ý trong phát triển Website
• Phân tích thiết kế HTTT
– Nhận yêu cầu và tiến hành khảo sát
– Đặc tả
– Phân tích
– Thiết kế
– Lập trình
– Kiểm thử
22
4. Một số điều cần chú ý trong phát triển Website
• Đặc tả:
– Web để làm gì?
– Ai dùng?
– Trình độ người dùng?
– Nội dung, hình ảnh?
• Phân tích
– Mối liên quan giữa các 
nội dung?
– Thứ tự các nội dung?
8/2/2010
12
23
4. Một số điều cần chú ý trong phát triển Website
• Thiết kế
– Sơ đồ cấu trúc website
– Giao diện
– Tĩnh hay động
– CSDL
– Nội dung từng trang
– Liên kết giữa các trang
• Xây dựng
– Cấu trúc thư mục
– Các modul dùng chung
– …
24
4. Một số điều cần chú ý trong phát triển Website
• Kiểm thử
– Kiểm tra trên nhiều 
trình duyệt
– Kiểm tra trên nhiều 
loại mạng
– Kiểm tra tốc độ
– Kiểm tra các liên kết
– Thử các lỗi bảo mật
– …