Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Công Cụ Web
Cách hoạt động của
World Wide Web
1
Tổng quan
Servers
Database
g
Pa
Client
Page to Browser
st
ue
eq
r
e
Hello
P>
Display
Hello
ASPX: Template/Layout
ASPX.vb: Code
Imports System.Data
Public Class MyStart
…
End Class
CSS Style Sheet
User
Body
{
font-family: …;
font-weight: …;
}
2
Công cụ Web
1
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Tổng quan
Cách hoạt động của các trang web
Cách hoạt động của các trình duyệt web
Cách hoạt động của các ngôn ngữ Markup
Cách hoạt động của HyperText
Cách hoạt động của URL
Cách hoạt động của các imagemap
(bản đồ ảnh) và các Form tương tác
Cách hoạt động của Web Host Server
Cách hoạt động của Website với các cơ sở
dữ liệu
3
Công cụ Web
Cách hoạt động của các trang web
World Wide Web (WWW) là phần phát
triển và cải tiến nhất của Internet.
WWW cho phép chúng ta thể hiện các
văn bản dưới dạng đa phương tiện gồm
có các văn bản (text), hình ảnh đồ họa
(image), âm thanh (audio), phim ảnh
(video) và các liên kết đến các trang web
hay tài nguyên web khác.
Ngôn ngữ dùng để tạo web được gọi là
HyperText Markup Language (HTML)
4
Công cụ Web
2
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Cách hoạt động của các trang web
HTML Codes
…
Request
Response
Client
Web Server
Program /
Scripts
5
Công cụ Web
Cách hoạt động của các trang web
(tiếp theo)
WWW hoạt động dựa trên mô hình
client/server trong đó:
phần mềm client là các trình duyệt web
(Internet Explorer, Nestcape
Communicator, Firefox, Opera…) chạy
trên các máy đơn.
phần mềm server (IIS, Apache…) chạy
trên máy chủ web.
Để sử dụng web trước tiên máy bạn phải
có kết nối Internet và sau đó khởi động
trình duyệt web (web browser)
6
Công cụ Web
3
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Cách hoạt động của các trang web
(tiếp theo)
i. Để mở một trang web, user phải gõ nhập địa
chỉ URL tương ứng của trang web hay tài
nguyên web vào ô địa chỉ của trình duyệt.
ii. Trình duyệt web gửi yêu cầu URL bằng cách
sử dụng giao thức HTTP, giao thức này ấn
định cách mà trình duyệt web và web server
giao tiếp với nhau.
iii. Địa chỉ URL sẽ cho biết chính xác trang web
hay tài nguyên web nào được yêu cầu
protocol://host.domain:port/path/filename
7
Công cụ Web
Cách hoạt động của các trang web
(tiếp theo)
iv. Yêu cầu được gửi đến Internet. Các Internet
Router kiểm tra yêu cầu để xác định web
server nào phù hợp dựa trên địa chỉ URL
(host.domain:port/path/filename) và gửi đi.
v. Web server nhận yêu cầu bằng cách sử dụng
giao thức HTTP để biết được trang web hay
tài nguyên web nào được yêu cầu
vi. Khi web server tìm thấy trang web hay tài
nguyên web được yêu cầu nó gửi trang web
hay tài nguyên web đó trở về trình duyệt
web trên máy con để hiển thị cho user thấy.
8
Công cụ Web
4
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Trình duyệt web (Web browser)
9
Công cụ Web
Cách hoạt động của trình duyệt web
Các trình duyệt web là các phần mềm client
(Internet Explorer, Nestcape Communicator,
Firefox, Opera…) chạy trên các máy đơn.
Trình duyệt web hiển thị thông tin bằng cách
thông dịch ngôn ngữ HTML. Việc tạo mã
bằng ngôn ngữ HTML cho trình duyệt web
biết cách hiển thị các văn bản dưới dạng đa
phương tiện gồm có các văn bản (text), hình
ảnh đồ họa (image), âm thanh (audio), phim
ảnh (video) và các liên kết đến các trang
web hay tài nguyên web khác.
10
Công cụ Web
5
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Các thông báo lỗi thông thường
của trình duyệt web
i.
Server Does Not Have a DNS Entry
ii. 503 Service Unavailable
iii. 4039 Access Forbidden, Too Many User
Are Connected
iv. 404 Not Found
v. 401 Unauthorized
vi. 403 Forbidden
11
Công cụ Web
Các ngôn ngữ Markup
Procedural Markup
Descriptive Markup
12
Công cụ Web
6
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Cách hoạt động của
các ngôn ngữ Markup
Ngôn ngữ Markup là tập hợp các thẻ lệnh
(tag) để thể hiện các các văn bản.
HTML là ngôn ngữ markup của web.
HTML dùng để định dạng các loại văn
bản trên web và các liên kết đến các
trang web hay tài nguyên web khác.
Chúng ta có thể sử dụng bất kỳ chương
trình soạn thảo văn bản nào để tạo trang
web bằng ngôn ngữ HTML.
Web được phát triển từng ngày và HTML
cũng mở rộng và thay đổi thành Dynamic
HTML (DHTML).
13
Công cụ Web
Cách hoạt động của HyperText
Clicking on the “Deitel” link will open up the
Deitel homepage in a new browser window.
14
Công cụ Web
7
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Cách hoạt động của HyperText
HyperText gồm có một siêu liên kết
(Hyperlink) xuất hiện trên màn hình dưới
dạng một dòng văn bản được bật sáng,
một biểu tượng hay một hình ảnh.
Khi kích vào các hyperlink, trang web sẽ
chuyển đến trang web hay tài nguyên web
tương ứng được khai báo trong liên kết.
15
Công cụ Web
Cách hoạt động của URL
i. Trình duyệt web trên máy con gửi địa chỉ
URL của tài nguyên web đến máy chủ thông
qua kết nối bằng giao thức TCP/IP
ii. Sau khi nhận địa chỉ URL, máy chủ sẽ thực
hiện việc tìm kiếm tài nguyên web tương
ứng. Nếu tìm thấy, máy chủ sẽ kiểm tra
kiểu file của tài nguyên đó và gửi thông tin
này đến máy con. Ngược lại, máy chủ sẽ
thông báo không tìm thấy
iii. Trình duyệt web trên máy con sẽ đọc kiểu
file và hiển thị thông tin nếu kiểu file đó
trình duyệt đọc được. Ngược lại trình duyệt
sẽ hiển thị hộp thoại cho phép lưu file để có
thể mở bằng phần mềm thích hợp
16
Công cụ Web
8
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Cách hoạt động của các
imagemap và các Form
Imagemap là các hình ảnh đồ họa trên
trang web. Các Imagemap có thể chứa
các hyperlink để liên kết đến các tài
nguyên web khác bằng địa chỉ URL
Các chức năng trên web thường được gọi
là các Form tương tác. Các Form tương
tác là nơi để bạn cung cấp thông tin cho
trang web như: họ tên, địa chỉ, email…
17
Công cụ Web
Cách hoạt động của các imagemap
18
Công cụ Web
9
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Cách hoạt động của các imagemap
i.
Khi user nhấn chuột kích hoạt vào vùng
liên kết được chỉ định trên Imagemap,
trình duyệt sẽ gửi tọa độ (x,y) tại vị trí
đó đến mày chủ
ii. Máy chủ sẽ dò tìm và gửi tài nguyên
web tương ứng về cho máy con
iii. Trình duyệt trên máy con sẽ hiển thị tài
nguyên web được trả về cho user thấy
19
Công cụ Web
Form tương tác
20
Công cụ Web
10
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Cách hoạt động của các
Form tương tác
Khi làm việc với một form tương tác, sau
khi nhập đầy đủ các thông tin cần thiết
user nhấn vào một nút đặc biệt (submit)
để gửi thông tin đến máy chủ.
Tại máy chủ các thông tin trên sẽ được
xử lý và gửi đến chương trình khác
chẳng hạn như một cơ sở dữ liệu hoặc
một trang web khác tùy theo yêu cầu
nghiệp vụ
21
Công cụ Web
Cách hoạt động của
Web Host Server
Trình duyệt web trên máy con gửi yêu cầu
về dữ liệu đến Web server
Nếu yêu cầu là một tài nguyên web, web
server sẽ tìm file tương ứng, đính kèm theo
một header và gởi nó đến trình duyệt
Nếu yêu cầu là một thông tin lưu trữ tại
một cơ sở dữ liệu cụ thể, web server sẽ
chuyển yêu cầu đến một chương trình thích
hợp xử lý, trả kết quả về cho web server,
web server sẽ đính kèm theo một header
vào kết quả và gởi nó đến trình duyệt
22
Công cụ Web
11
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Cách hoạt động của Website với
các cơ sở dữ liệu
Server
Component
Request
Database
Client
Reply Web Page
Web Server
Web Page
23
Công cụ Web
Cách hoạt động của Website với
các cơ sở dữ liệu
Trình duyệt web trên máy con gửi yêu cầu
về dữ liệu đến Web server trong một chuỗi
vấn tin (query) gửi kèm theo địa chỉ URL
Web server nhận yêu cầu. Sau đó chuyển
yêu cầu đến một chương trình thích hợp kết
nối đến cơ sở dữ liệu tương ứng
Cơ sở dữ liệu tìm kiếm các bản ghi (record)
phù hợp với query rồi trả kết quả về cho
web server dưới dạng một trang web mới
Trang web này sẽ được web server gửi về
cho trình duyệt để hiển thị kết quả cho user
24
Công cụ Web
12
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Công Cụ Web
Ngôn ngữ HTML
25
Nội dung chính
1.
2.
3.
4.
5.
6.
7.
Giới thiệu về WWW
Giới thiệu ngôn ngữ HTML
Cấu trúc của một tài liệu HTML đơn giản
Các phần tử (element) HTML cơ bản
Siêu liên kết (Hyperlink)
Hình ảnh (Image)
Làm việc với các ứng dụng Multimedia
trên nền HTML
8. Cách trình bày website
26
Công cụ Web
13
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
1. Giới thiệu về WWW
(World Wide Web)
Internet là mạng máy tính lớn nhất trên
thế giới hay còn gọi là mạng của các
mạng máy tính (network of networks).
World Wide Web (WWW) là một tập con
của Internet. WWW bao gồm các web
server (máy chủ web) trên thế giới.
Web server chứa thông tin để người sử
dụng ở bất kỳ nơi nào trên thế giới truy
cập qua mạng Internet.
27
Công cụ Web
1. Giới thiệu về WWW
(tiếp theo)
WWW được bắt đầu từ một dự án nghiên
cứu của chính phủ Thụy Sĩ, Tim BernersLee là người đầu tiên thiết lập ra các tiêu
chuẩn cho WWW
WWW được dựa trên trên 03 thành phần:
Protocols: HTTP (HyperText Transfer
Protocol)
Addresses: URLs (Uniform Resource
Locators): http://www.ou.edu.vn
HTML (HyperText Markup Language)
28
Công cụ Web
14
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
2. Giới thiệu ngôn ngữ HTML
Ngôn ngữ HTML chỉ ra cách một trang
web được hiển thị trên trình duyệt web
(browser). Tài liệu HTML tạo thành mã
nguồn trang web.
Sử dụng các thẻ (tag) và các phần tử
(element) của HTML để:
Điều khiển hình thức và nội dung của
trang web
Công bố và truy xuất thông tin trực tuyến
bằng các liên kết
Thu thập thông tin trực tuyến bằng các
biểu mẫu
Đưa vào trang web các audio clip, video
clip, Activex, Java Applet…
29
Công cụ Web
3. Cấu trúc đơn giản của HTML
Tiêu đề
Nội dung
30
Công cụ Web
15
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Các phần tử (element) HTML cơ bản
Block-level
Headers
(h1 đến h6)
Paragraph
(p)
List Items
(li)
Horizontal Rules
(hr)
Text-level
em, I , b, font
a
Applet
Img
Breaks
Font
Alignment
Formating
31
Công cụ Web
4. Thẻ lệnh HTML (HTML Tags)
Mỗi thẻ HTML (HTML tag) được xác định bởi
tên thẻ (tag name), đôi khi được theo sau
bởi một danh sách tùy chọn của các thuộc
tính, tất cả được đặt nằm giữa ký hiệu < >.
Các thành phần bên trong ký hiệu này sẽ
không hiển thị trên trình duyệt.
Tên thẻ thông thường là tên viết tắt chức
năng của thẻ để dễ hiểu.
Thuộc tính là các đặc tính dùng để mở rộng
chức năng của thẻ.
32
Công cụ Web
16
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
HTML Tags
(tiếp theo)
HTML tags được sử dụng để đánh dấu
phần tử HTML (HTML elements)
HTML tags được bao bởi 2 ký hiệu < và >
HTML tags thường đi theo cặp như:
và
Tag đầu tiên của cặp là thẻ bắt đầu, tag
thứ hai là thẻ kết thúc
Phần văn bản nằm giữa thẻ bắt đầu và
thẻ kết thúc là nội dung của phần tử đó.
HTML tags không phân biệt chữ hoa hay
chữ thường, giống như
33
Công cụ Web
Thuộc tính của thẻ
(Tag Attributes)
Thẻ có thể có thuộc tính.
Thuộc tính thường thể hiện dưới dạng:
name="value".
Thuộc tính luôn được thêm vào phần
thẻ bắt đầu của phần tử HTML.
Các giá trị của thuộc tính phải được để
trong dấu “”, đôi khi là ‘’.
name='John "ShotGun" Nelson'
34
Công cụ Web
17
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Thẻ
Thẻ được khai báo bên trong
phần tiêu đề. Phần tử này cung cấp thông
tin về trang web của bạn bao gồm: tên tác
giả, tên phần mềm dùng để thiết kế,
thông tin liên lạc
Ví dụ:
Thuộc tính http-equipv có thể được dùng
để thay thế thuộc tính name.
Máy chủ HTTP sử dụng thuộc tính này để
tạo ra một đầu đáp ứng HTTP (HTTP
response header)
35
Công cụ Web
Thẻ
(tiếp theo)
Đầu đáp ứng được truyền tới trình duyệt để
nhận dạng dữ liệu. Nếu tài liệu đã được lưu
lại, HTTP sẽ biết khi nào truy xuất một bản
sao của tài liệu tương ứng
Ví dụ:
Sẽ sinh ra một đầu đáp ứng HTTP như sau:
Expires: Mon, 11 Sep 2006 19:15:30 GMT
36
Công cụ Web
18
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Ký tự đặc biệt
trong tài liệu HTML
Ký tự đặc biệt
Mã HTML
Lớn hơn (>)
>
Nhỏ hơn (<)
<
Trích dẫn (“”)
"
Ký tự “&”
$amp
37
Công cụ Web
Thẻ và
Thẻ
dùng để trình bày một đoạn
văn bản trong tài liệu HTML. Thẻ
được sử dụng để đánh dấu sự bắt đầu
của một đoạn mới.
Thẻ
được sử dụng để ngắt dòng tài
liệu HTML. Thẻ
bổ sung một ký tự
xuống dòng tại vị trí của thẻ.
Ví dụ
38
Công cụ Web
19
Công cụ web
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
Canh lề trong HTML
Thuộc tính align được sử dụng để canh
lề cho các phần tử HTML trong trang
web. Chúng ta có thể canh lề văn bản,
các đối tượng, hình ảnh, các đoạn…
Thuộc tính align có các giá trị sau:
Giá trị
Mô tả
left
Canh trái
center
Canh giữa
right
Canh phải
justify
Canh đều
39
Công cụ Web
5. Siêu liên kết (Hyperlink)
Siêu liên kết là một phần tử bên trong tài
liệu liên kết đến một vị trí khác trong cùng
tài liệu đó hoặc đến một tài liệu hoàn toàn
khác.
Khi kích vào siêu liên kết, người dùng được
đưa đến địa chỉ URL mà chúng ta ghi rõ
trong liên kết
Các liên kết có thể là liên kết trong hoặc liên
kết ngoài
Liên kết trong là liên kết kết nối đến các phần
trong cùng tài liệu hoặc cùng một website
Liên kết ngoài là liên kết kết nối đến các trang
trên các website khác hoặc máy chủ khác
40
Công cụ Web
20
- Xem thêm -
Chi phí hỗ trợ lưu trữ và tải về cho tài liệu này là đ. Bạn có muốn hỗ trợ không?