BÀI GIẢNG MÔN CÔNG CỤ WEB
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (10.76 MB, 260 trang )
Công cụ web
1
1
Công Cụ Web
Cách hoạt động của
World Wide Web
2
Công cụ Web
Tổng quan
<HTML>
<BODY>
<P>Hello<BR>
<IMG
SRC=‘file.gif’></
P>
</HTML>
Hello
Page to Browser
Display
User
Client
Body
{
font-family: …;
font-weight: …;
}
Servers
CSS Style Sheet
<HTML>
<asp: label…>
<asp: TextBox…>
</HTML>
ASPX: Template/Layout
Imports System.Data
Public Class MyStart
…
End Class
ASPX.vb: Code
Database
P
a
g
e
r
e
q
u
e
s
t
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
2
3
Công cụ Web
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
4
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)
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
3
5
Công cụ Web
Cách hoạt động của các trang web
HTML Codes
<html>
…
</html>
Program /
Scripts
Client Web Server
Request
Response
6
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)
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
4
7
Công cụ Web
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
Cách hoạt động của các trang web
(tiếp theo)
8
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.
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
5
9
Công cụ Web
Trình duyệt web (Web browser)
10
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.
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
6
11
Công cụ Web
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
12
Công cụ Web
Các ngôn ngữ Markup
Descriptive Markup
Descriptive Markup
Procedural Markup
Procedural Markup
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
7
13
Công cụ Web
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).
14
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.
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
8
15
Công cụ Web
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.
16
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
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
9
17
Công cụ Web
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…
18
Công cụ Web
Cách hoạt động của các imagemap
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
10
19
Công cụ Web
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
20
Công cụ Web
Form tương tác
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
11
21
Công cụ Web
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ụ
22
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
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
12
23
Công cụ Web
Cách hoạt động của Website với
các cơ sở dữ liệu
Database
Client Web Server
Request
Reply Web Page
Server
Component
Web Page
24
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
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
13
25
Công Cụ Web
Ngôn ngữ HTML
26
Công cụ Web
Nội dung chính
1. Giới thiệu về WWW
2. Giới thiệu ngôn ngữ HTML
3. Cấu trúc của một tài liệu HTML đơn giản
4. Các phần tử (element) HTML cơ bản
5. Siêu liên kết (Hyperlink)
6. Hình ảnh (Image)
7. 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
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
14
27
Công cụ Web
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.
28
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 Berners-
Lee 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):
HTML (HyperText Markup Language)
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
15
29
Công cụ Web
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…
30
Công cụ Web
3. Cấu trúc đơn giản của HTML
<HTML>
<HEAD>
<TITLE>Tiêu đề</TITLE>
</HEAD>
<BODY>
Nội dung
</BODY>
</HTML>
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
16
31
Công cụ Web
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 <br>
Font <font>
Alignment<align>
Formating
32
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ẻ.
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
17
33
Công cụ Web
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ư:
<b> và </b>
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, <b> giống như <B>
34
Công cụ Web
Thuộc tính của thẻ
(Tag Attributes)
Thẻ có thể có thuộc tính.
<body bgcolor="red">
<table border="0">
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'
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
18
35
Công cụ Web
Thẻ <META>
Thẻ <META> đượ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ụ
:
<META name=“Author” content=“NCU”>
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)
36
Công cụ Web
Thẻ <META>
(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ụ:
<META http-equipv =“Expires”
content=“Mon, 11 Sep 2006 19:15:30 GMT”>
Sẽ sinh ra một đầu đáp ứng HTTP như sau:
Expires: Mon, 11 Sep 2006 19:15:30 GMT
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
19
37
Công cụ Web
Ký tự đặc biệt
trong tài liệu HTML
$ampKý tự “&”
"Trích dẫn (“”)
<Nhỏ hơn (<)
>Lớn hơn (>)
Mã HTMLKý tự đặc biệt
38
Công cụ Web
Thẻ <p> và <br>
Thẻ <p> dùng để trình bày một đoạn
văn bản trong tài liệu HTML. Thẻ <p>
được sử dụng để đánh dấu sự bắt đầu
của một đoạn mới.
Thẻ <br> được sử dụng để ngắt dòng tài
liệu HTML. Thẻ <br> bổ sung một ký tự
xuống dòng tại vị trí của thẻ.
Ví dụ
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
20
39
Công cụ Web
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:
Canh đềujustify
Canh phảiright
Canh giữacenter
Canh tráileft
Mô tảGiá trị
40
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
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
21
41
Công cụ Web
Sử dụng siêu liên kết
Để tạo siêu liên kết, chúng ta cần phải
xác định hai thành phần:
Địa chỉ đầy đủ hoặc URL của file được kết
nối đến
Thành phần cung cấp cho liên kết. Thành
phần này có thể là một dòng văn bản,
một hình ảnh
Khi người dùng kích vào thành phần
được liên kết, trình duyệt đọc địa chỉ
được chỉ ra trong URL và chuyển đến địa
chỉ mới.
42
Công cụ Web
Thẻ <a>
<a> </a>
Định nghĩa một anchor trong văn bản. Anchor
được dùng để liên kết với các trang khác. Nó có
thể được dùng để gán nhãn cho 1 phần trong
văn bản (còn được gọi là named anchor).
Attributes
href=url
xác định địa chỉ URL của nơi cần liên kết.
name=text
định danh cho một phần văn bản trên trang
web. (Dùng trong liên kết nội trong trangweb)
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
22
43
Công cụ Web
Thẻ <a>
(tiếp theo)
charset=charset
xác định bộ character encoding cho phần văn
bản được liên kết
title=text
Đưa ra tiêu đề cho phần văn bản được liên kết.
target=text
xác định tên của window hoặc frame hiển thị
phần văn bản được liên kết.
44
Công cụ Web
Thẻ <a>
(tiếp theo)
Tạo một anchor <A name=“anchor_name”> </A>
Liên kết đến một file nằm cùng thư mục:
<A HREF="filename.html"> </A>
Liên kết đến một file bên ngoài:
<A HREF="http://server/path/file.html"> </A>
Liên kết đến một named anchor:
<A HREF="http://server/path/file.html#fragment">
</A>
Liên kết đến một named anchor trong cùng file:
<A HREF="#fragment"> </A>
Gửi một email:
<A HREF="mailto:username@domain"> </A>
Tải về một file trên một FTP server:
<A HREF="ftp://server/path/filename"> </A>
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
23
45
Công cụ Web
Thiết lập màu sắc cho liên kết
Links
<BODY LINK="color">
Xác lập màu cho liên kết. Màu mặc định là
blue.
Visited Visited links
<BODY VLINK="color">
Xác lập màu cho đã được chọn.
Màu mặc định là purple.
Active links
<BODY ALINK="color">
Xác lập màu cho liên kết hoạt động.
Màu mặc định là blue.
46
Công cụ Web
7. Hình ảnh
<img> </img>
Dùng để chèn hình ảnh vào trang web
Attributes
align=top|middle|bottom|left|right
canh lề cho hình ảnh và văn bản xung
quanh.
alt=text
Chuỗi văn bản hiển thị để thay thế khi hình
ảnh không hiển thị.
border=number
Chỉ ra độ dày (theo pixel) của đường viền.
Giá trị mặc định là 0.
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
24
47
Công cụ Web
Hình ảnh
(tiếp theo)
height=number
xác định chiều cao của hình (theo pixel)
hoặc theo tỉ lệ phần trăm
width=number
Xác định chiều rộng của hình (theo pixel)
hoặc theo tỉ lệ phần trăm
src=url
Xác định địa chỉ URL của tập tin hình ành.
<IMG SRC="star.gif" WIDTH=50
HEIGHT=50> Picture</IMG>
48
Công cụ Web
Các định dạng hình ảnh
GIF Format (8 bits)
JPG Format (24 bits)
PNG Format (48 bits)
Animated GIF
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
Công cụ web
25
49
Công cụ Web
Số lượng màu theo Bit-Depth
Bit-Depth = Color-Depth
Số lượng màu = 2^(Bit-depth)
Bit-depth là số bit màu. Hay còn được gọi
là độ phân giải màu “Color resolution”.
2^24 = 16.7
million
16,777,215 colors24-bits
2^16 = 6553665,536 colors16-bits
2^8 = 256256 colors8-bits
2^4 = 1616 colors4-bit
2^3 = 88 colors3-bit
2^2 = 44 colors2-bit
2^1 = 22 colors1-bit
CalcuationColor resolutionBit depth
50
Công cụ Web
Bitmaps, Pixels & Colors
Các điểm màu tạo thành một hình
bitmap được gọi là "pixels".
Web pages được tính theo đơn vị Pixels.
Màu sắc (Color) thể hiện trên máy tính là
tập hợp từ ba màu chính:
red, green, blue (RGB).
Các màu khác để thể hiện dựa vào ba
màu kể trên
Generated by Foxit PDF Creator © Foxit Software
For evaluation only.
