Transcript Chuong6-HUNG-HeThongWeb&HTML
Slide 1
Hệ thống World Wide Web
& Lập trình Web chạy ở phía client
dùng DHTML và JavaScript
Nguyễn Quang Hùng
E-mail: [email protected]
Website: www.dit.hcmut.edu.vn/~hungnq/courses.htm
Slide 2
Mục tiêu buổi học (3 tiết)
Tìm hiểu về hệ thống World Wide Web:
1.
a.
b.
c.
2.
3.
Mô hình hoạt động: Web browser/Web server
HyperText Transfer Protocol (HTTP)
HyperText Markup Language (HTML)
Lập trình Web chạy ở phía client bằng
DHTML và Javascript, Java Applet, XML
Bài tập: tạo ứng dụng VnIE cho phép
duyệt Web như một trình duyệt thông
thường.
Faculty of Information Technology, HCM University of Technology
Slide 3
Giới thiệu mạng Internet
Mạng LAN (Local Area Network)
Mạng WAN (Wide Area Network)
Mạng cục bộ có bán kính giới hạn về mặt địa lý
Tốc độ truyền dữ liệu cao
Mạng nối kết các mạng LANs, không giới hạn về mặt
địa lý.
Có tốc độ truyền tương đối thấp
Mạng Internet là mạng máy tính toàn cầu, kết nối
các mạng của các tổ chức, cá nhân trên thế giới
Các dịch vụ phổ biến trên Internet: web, e-mail, chat,
FTP,…
Faculty of Information Technology, HCM University of Technology
Slide 4
Giới thiệu hệ thống World Wide Web
(WWW)
Mô hình hoạt động: Web client/Web server
Web client
HTTP
Faculty of Information Technology, HCM University of Technology
Web server
Slide 5
Hệ thống WWW ở góc nhìn lập trình
Web server lắng nghe ở
port 80 (port mặc định)
Web browser và web
server sẽ tạo 1 cầu nối
TCP để trao đổi thông tin;
và dùng giao thức HTTP
(HyperText
Transfer
Protocol) để truyền tài
nguyên web (web page,
image, order data, credit
card…).
Faculty of Information Technology, HCM University of Technology
Slide 6
Các phần tử trong hệ thống WWW
Web server: chương trình quản lý một cây thứ bậc các trang
Web và phục vụ yêu cầu truy xuất chúng từ các client từ xa.
VD: Apache Http server, IIS, PWS…
Web Browser: chương trình giao tiếp với người dùng, nhận
yêu cầu từ user rồi truy xuất trang Web ở server tương ứng
để phân giải và hiển thị nội dung lên màn hình. VD:
firefox, IE, Mozilla…
Web page: đơn vị gởi nhận giữa Web server và Web client,
nó là 1 file văn bản được viết bằng ngôn ngữ HTML,
DHML, XML
Faculty of Information Technology, HCM University of Technology
Slide 7
CẤU TRÚC MỘT GIAO DỊCH HTTP 1.x
Bước 1: HTTP client mở kết nối đến HTTP
server
Bước 2: HTTP client gửi request message
đến HTTP server
Bước 3: HTTP server trả response mesage
về cho HTTP client, chứa resource mà
HTTP client yêu cầu
Bước 4: HTTP server đóng kết nối
Lưu ý: HTTP 1.1 còn cho phép keep-alive
trên cầu nối TCP này
Faculty of Information Technology, HCM University of Technology
Slide 8
Ví dụ về một HTTP request/response
Client: GET http://www.w3c.org/index.html HTTP/1.1
From: [email protected]
User-Agent: HTTPTool/1.0
[blank line here]
Server: HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Content-Type: text/html
Content-Length: 1354
[blank line here]
…
Faculty of Information Technology, HCM University of Technology
Slide 9
Uniform Resource Locator (URL)
Địa chỉ URL bao gồm 3 phần:
protocol, host và path
Ví dụ:
http://www.hcmut.edu.vn/index.htm
Faculty of Information Technology, HCM University of Technology
Slide 10
Các lệnh trong HTTP 1.x
GET
POST
Gửi dữ liệu từ web client về server.
HEAD
Lấy toàn bộ một trang web.
Chỉ lấy phần header của một trang web (phần
thẻ …) mà không cần lấy nội
dung.
etc
Faculty of Information Technology, HCM University of Technology
Slide 11
Tham khảo
RFC 1945-HTTP 1.0
RFC 2616-HTTP 1.1
www.jmarshall.com/easy/http/
www.w3.org
…
Faculty of Information Technology, HCM University of Technology
Slide 12
HyperText Markup Language
& Lập trình trang web động bằng
DHTML và Javascript
Nguyễn Quang Hùng
E-mail: [email protected]
http://www.dit.hcmut.edu.vn/~hungnq/courses.htm
Trích từ tập slide môn Lập trình mạng của T.S Nguyễn Văn Hiệp – Bộ
môn CNPM – Khoa CNTT ĐHBK TPHCM
Slide 13
Mục tiêu
Giới thiệu về lập trình web
Tìm hiểu về ngôn ngữ đánh dấu siêu văn
bản (HTML – HyperText Markup
Language)
Faculty of Information Technology, HCM University of Technology
Slide 14
Mục lục
Lịch sử
Các thẻ (tag) căn bản
Hướng phát triển
Faculty of Information Technology, HCM University of Technology
Slide 15
Giới thiệu về lập trình web
Các đặc điểm của ứng dụng web
Không phải là một ứng dụng độc lập, là ứng
dụng chạy trên nền web-server.
Người lập trình có thể thực hiện các thao tác
trên ứng dụng web như với một ứng dụng độc
lập.
Có thể lấy thông tin từ user.
Faculty of Information Technology, HCM University of Technology
Slide 16
Lịch sử về HTML
1989: dự án đề nghị của CERN về WWW
1992: phân các lớp cơ bản
[email protected]
Các trình duyệt ban đầu rất khó cài đặt…
1993: NCSA Mosaic released, Web cất
cánh bay xa
Faculty of Information Technology, HCM University of Technology
Slide 17
The Internet Engineering Task Force (IETF)
07/93: Internet Draft for HTML+
11/95: RFC1866 - HTML 2.0
11/95: RFC1867 - Form-based file Upload
03/95: HTML 3.0 Draft ổn định hơn HTML
2.0
05/96: RFC1942 - HTML Tables
01/97: RFC2070 - Internationalization of
HTML
Sau 96: IETF HTML WG đóng lại
Faculty of Information Technology, HCM University of Technology
Slide 18
W3C tiếp quản chuẩn HTML
12/95: W3C họp các nhà cung cấp chính yếu.
Công việc ban đầu trên tiêu chí mô hình đối tượng
thông thường:
Hệ thống World Wide Web
& Lập trình Web chạy ở phía client
dùng DHTML và JavaScript
Nguyễn Quang Hùng
E-mail: [email protected]
Website: www.dit.hcmut.edu.vn/~hungnq/courses.htm
Slide 2
Mục tiêu buổi học (3 tiết)
Tìm hiểu về hệ thống World Wide Web:
1.
a.
b.
c.
2.
3.
Mô hình hoạt động: Web browser/Web server
HyperText Transfer Protocol (HTTP)
HyperText Markup Language (HTML)
Lập trình Web chạy ở phía client bằng
DHTML và Javascript, Java Applet, XML
Bài tập: tạo ứng dụng VnIE cho phép
duyệt Web như một trình duyệt thông
thường.
Faculty of Information Technology, HCM University of Technology
Slide 3
Giới thiệu mạng Internet
Mạng LAN (Local Area Network)
Mạng WAN (Wide Area Network)
Mạng cục bộ có bán kính giới hạn về mặt địa lý
Tốc độ truyền dữ liệu cao
Mạng nối kết các mạng LANs, không giới hạn về mặt
địa lý.
Có tốc độ truyền tương đối thấp
Mạng Internet là mạng máy tính toàn cầu, kết nối
các mạng của các tổ chức, cá nhân trên thế giới
Các dịch vụ phổ biến trên Internet: web, e-mail, chat,
FTP,…
Faculty of Information Technology, HCM University of Technology
Slide 4
Giới thiệu hệ thống World Wide Web
(WWW)
Mô hình hoạt động: Web client/Web server
Web client
HTTP
Faculty of Information Technology, HCM University of Technology
Web server
Slide 5
Hệ thống WWW ở góc nhìn lập trình
Web server lắng nghe ở
port 80 (port mặc định)
Web browser và web
server sẽ tạo 1 cầu nối
TCP để trao đổi thông tin;
và dùng giao thức HTTP
(HyperText
Transfer
Protocol) để truyền tài
nguyên web (web page,
image, order data, credit
card…).
Faculty of Information Technology, HCM University of Technology
Slide 6
Các phần tử trong hệ thống WWW
Web server: chương trình quản lý một cây thứ bậc các trang
Web và phục vụ yêu cầu truy xuất chúng từ các client từ xa.
VD: Apache Http server, IIS, PWS…
Web Browser: chương trình giao tiếp với người dùng, nhận
yêu cầu từ user rồi truy xuất trang Web ở server tương ứng
để phân giải và hiển thị nội dung lên màn hình. VD:
firefox, IE, Mozilla…
Web page: đơn vị gởi nhận giữa Web server và Web client,
nó là 1 file văn bản được viết bằng ngôn ngữ HTML,
DHML, XML
Faculty of Information Technology, HCM University of Technology
Slide 7
CẤU TRÚC MỘT GIAO DỊCH HTTP 1.x
Bước 1: HTTP client mở kết nối đến HTTP
server
Bước 2: HTTP client gửi request message
đến HTTP server
Bước 3: HTTP server trả response mesage
về cho HTTP client, chứa resource mà
HTTP client yêu cầu
Bước 4: HTTP server đóng kết nối
Lưu ý: HTTP 1.1 còn cho phép keep-alive
trên cầu nối TCP này
Faculty of Information Technology, HCM University of Technology
Slide 8
Ví dụ về một HTTP request/response
Client: GET http://www.w3c.org/index.html HTTP/1.1
From: [email protected]
User-Agent: HTTPTool/1.0
[blank line here]
Server: HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Content-Type: text/html
Content-Length: 1354
[blank line here]
…
Faculty of Information Technology, HCM University of Technology
Slide 9
Uniform Resource Locator (URL)
Địa chỉ URL bao gồm 3 phần:
protocol, host và path
Ví dụ:
http://www.hcmut.edu.vn/index.htm
Faculty of Information Technology, HCM University of Technology
Slide 10
Các lệnh trong HTTP 1.x
GET
POST
Gửi dữ liệu từ web client về server.
HEAD
Lấy toàn bộ một trang web.
Chỉ lấy phần header của một trang web (phần
thẻ …) mà không cần lấy nội
dung.
etc
Faculty of Information Technology, HCM University of Technology
Slide 11
Tham khảo
RFC 1945-HTTP 1.0
RFC 2616-HTTP 1.1
www.jmarshall.com/easy/http/
www.w3.org
…
Faculty of Information Technology, HCM University of Technology
Slide 12
HyperText Markup Language
& Lập trình trang web động bằng
DHTML và Javascript
Nguyễn Quang Hùng
E-mail: [email protected]
http://www.dit.hcmut.edu.vn/~hungnq/courses.htm
Trích từ tập slide môn Lập trình mạng của T.S Nguyễn Văn Hiệp – Bộ
môn CNPM – Khoa CNTT ĐHBK TPHCM
Slide 13
Mục tiêu
Giới thiệu về lập trình web
Tìm hiểu về ngôn ngữ đánh dấu siêu văn
bản (HTML – HyperText Markup
Language)
Faculty of Information Technology, HCM University of Technology
Slide 14
Mục lục
Lịch sử
Các thẻ (tag) căn bản
Hướng phát triển
Faculty of Information Technology, HCM University of Technology
Slide 15
Giới thiệu về lập trình web
Các đặc điểm của ứng dụng web
Không phải là một ứng dụng độc lập, là ứng
dụng chạy trên nền web-server.
Người lập trình có thể thực hiện các thao tác
trên ứng dụng web như với một ứng dụng độc
lập.
Có thể lấy thông tin từ user.
Faculty of Information Technology, HCM University of Technology
Slide 16
Lịch sử về HTML
1989: dự án đề nghị của CERN về WWW
1992: phân các lớp cơ bản
[email protected]
Các trình duyệt ban đầu rất khó cài đặt…
1993: NCSA Mosaic released, Web cất
cánh bay xa
Faculty of Information Technology, HCM University of Technology
Slide 17
The Internet Engineering Task Force (IETF)
07/93: Internet Draft for HTML+
11/95: RFC1866 - HTML 2.0
11/95: RFC1867 - Form-based file Upload
03/95: HTML 3.0 Draft ổn định hơn HTML
2.0
05/96: RFC1942 - HTML Tables
01/97: RFC2070 - Internationalization of
HTML
Sau 96: IETF HTML WG đóng lại
Faculty of Information Technology, HCM University of Technology
Slide 18
W3C tiếp quản chuẩn HTML
12/95: W3C họp các nhà cung cấp chính yếu.
Công việc ban đầu trên tiêu chí mô hình đối tượng
thông thường: