5 Công cụ WebCách hoạt động của các trang web Client Web Server có kết nối Internet và sau đó khởi động trình duyệt web web browser... Địa chỉ URL sẽ cho biết chính xác trang web hay tài
Trang 1Công Cụ Web
Cách hoạt động của World Wide Web
… End Class ASPX.vb: Code
Database
Page
requ
est
Trang 23 Công cụ Web
Tổng quan
(bản đồ ảnh) và các Form tương tác
dữ liệu
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
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
HyperText Markup Language (HTML)
Trang 35 Công cụ Web
Cách hoạt động của các trang web
Client Web Server
có kết nối Internet và sau đó khởi động
trình duyệt web (web browser)
Trang 47 Công cụ Web
chỉ URL tương ứng của trang web hay tàinguyên web vào ô địa chỉ của trình duyệt
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
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àinguyên web được yêu cầu nó gửi trang web hay tài nguyên web đó trở về trình duyệtweb trên máy con để hiển thị cho user thấy
Trang 59 Công cụ Web
Trình duyệt web (Web browser)
Cách hoạt động của trình duyệt web
(Internet Explorer, Nestcape Communicator, Firefox, Opera…) chạy trên các máy đơn
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 đaphươ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 trangweb hay tài nguyên web khác
Trang 611 Công cụ Web
Các thông báo lỗi thông thường của trình duyệt web
ii 503 Service Unavailable
Trang 713 Công cụ Web
Cách hoạt động của các ngôn ngữ Markup
(tag) để thể hiện các các văn bản
HTML dùng để định dạng các loại vănbản trên web và các liên kết đến cáctrang web hay tài nguyên web khác
trình soạn thảo văn bản nào để tạo trangweb bằng ngôn ngữ HTML
cũng mở rộng và thay đổi thành Dynamic HTML (DHTML)
Cách hoạt động của HyperText
Clicking on the “Deitel” link will open up the
Deitel homepage in a new browser window.
Trang 815 Công cụ Web
Cách hoạt động của HyperText
(Hyperlink) xuất hiện trên màn hình dướidạ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
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ôngqua kết nối bằng giao thức TCP/IP
ii Sau khi nhận địa chỉ URL, máy chủ sẽ thựchiệ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 trakiể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ểufile 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
Trang 917 Công cụ Web
Cách hoạt động của các imagemap và các Form
trang web Các Imagemap có thể chứacác hyperlink để liên kết đến các tàinguyên web khác bằng địa chỉ URL
là các Form tương tác Các Form tươngtác là nơi để bạn cung cấp thông tin chotrang web như: họ tên, địa chỉ, email…
Cách hoạt động của các imagemap
Trang 1019 Công cụ Web
Cách hoạt động của các imagemap
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í
Trang 1121 Công cụ Web
Cách hoạt động của các Form tương tác
khi nhập đầy đủ các thông tin cần thiếtuser nhấn vào một nút đặc biệt (submit)
để gửi thông tin đến máy chủ
xử lý và gửi đến chương trình khácchẳng hạn như một cơ sở dữ liệu hoặcmột trang web khác tùy theo yêu cầunghiệp vụ
Cách hoạt động của Web Host Server
về dữ liệu đến Web server
server sẽ tìm file tương ứng, đính kèm theomộ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ạimộ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íchhợ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
Trang 1223 Công cụ Web
Cách hoạt động của Website với các cơ sở dữ liệu
Web Page
Cách hoạt động của Website với các cơ sở dữ liệu
về dữ liệu đến Web server trong một chuỗivấn tin (query) gửi kèm theo địa chỉ URL
yêu cầu đến một chương trình thích hợp kếtnố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ề choweb server dưới dạng một trang web mới
cho trình duyệt để hiển thị kết quả cho user
Trang 1427 Công cụ Web
1 Giới thiệu về WWW (World Wide Web)
thế giới hay còn gọi là mạng của cácmạng máy tính (network of networks)
của Internet WWW bao gồm các web server (máy chủ web) trên thế giới
dụng ở bất kỳ nơi nào trên thế giới truycập qua mạng Internet
1 Giới thiệu về WWW
(tiếp theo)
cứu của chính phủ Thụy Sĩ, Tim Lee là người đầu tiên thiết lập ra các tiêuchuẩn cho WWW
Protocols: HTTP (HyperText Transfer Protocol)
Addresses: URLs (Uniform Resource Locators): http://www.ou.edu.vn
HTML (HyperText Markup Language)
Trang 1529 Công cụ Web
2 Giới thiệu ngôn ngữ HTML
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
Trang 1631 Công cụ Web
Horizontal Rules (hr)
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ộctí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ứcnăng của thẻ để dễ hiểu
chức năng của thẻ
Trang 1733 Công cụ Web
HTML Tags
(tiếp theo)
phần tử HTML (HTML elements)
HTML tags được bao bởi 2 ký hiệu < và >
<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
thẻ kết thúc là nội dung của phần tử đó
chữ thường, <b> giống như <B>
Trang 1835 Công cụ Web
Thẻ <META>
Thẻ <META> được khai báo bên trongphần tiêu đề Phần tử này cung cấp thôngtin về trang web của bạn bao gồm: tên tácgiả, 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”>
để thay thế thuộc tính name
tạo ra một đầu đáp ứng HTTP (HTTP response header)
Thẻ <META>
(tiếp theo)
nhận dạng dữ liệu Nếu tài liệu đã được lưulại, HTTP sẽ biết khi nào truy xuất một bảnsao 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
Trang 1937 Công cụ Web
Ký tự đặc biệt trong tài liệu HTML
$amp
Ký tự “&”
" Trích dẫn (“”)
< Nhỏ hơn (<)
> Lớn hơn (>)
Mã HTML
Ký tự đặc biệt
Thẻ <p> và <br>
Thẻ <p> dùng để trình bày một đoạnvăn bản trong tài liệu HTML Thẻ <p>
được sử dụng để đánh dấu sự bắt đầucủa một đoạn mới
Thẻ <br> được sử dụng để ngắt dòng tàiliệu HTML Thẻ <br> bổ sung một ký tựxuống dòng tại vị trí của thẻ
Ví dụ
Trang 2039 Công cụ Web
Canh lề trong HTML
lề cho các phần tử HTML trong trangweb 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 đều justify
Canh phải right
Canh giữa center
Canh trái left
Mô tả Giá trị
5 Siêu liên kết (Hyperlink)
Siêu liên kết là một phần tử bên trong tàiliệu liên kết đến một vị trí khác trong cùngtài liệu đó hoặc đến một tài liệu hoàn toànkhá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ênkết ngoài
Liên kết trong là liên kết kết nối đến các phầntrong 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 trangtrên các website khác hoặc máy chủ khác
Trang 2141 Công cụ Web
được liên kết, trình duyệt đọc địa chỉđược chỉ ra trong URL và chuyển đến địachỉ mới
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).
Trang 2243 Công cụ Web
Liên kết đến một file nằm cùng thư mục:
Trang 2345 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
Trang 2447 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>
Trang 2549 Công cụ Web
Số lượng màu theo Bit-Depth
Bit-Depth = Color-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 colors
24-bits
2^16 = 65536 65,536 colors
16-bits
2^8 = 256
256 colors 8-bits
2^4 = 16
16 colors 4-bit
2^3 = 8
8 colors 3-bit
2^2 = 4
4 colors 2-bit
2^1 = 2
2 colors 1-bit
Calcuation Color resolution
Bit depth
Bitmaps, Pixels & Colors
bitmap được gọi là "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)
màu kể trên
Trang 2651 Công cụ Web
So sánh chất lượng ảnh 8-bit và 24-bit
Which Color Palette?
Blue (0,0,255)
Black (0,0,0)
Red (255,0,0)
White (FF,FF,FF) (255,255,255)
Green (0,255,0)
Why 00,33,66, 99,CC,FF?
Which one is (99,FF,CC), (153,255,204)?
Trang 2753 Công cụ Web
6x6x6 Color Palette
True Color (RGB) “Palette”
Trang 2855 Công cụ Web
Standard Web Palette
Xác định giá trị của RGB
Tầm giá trị từ 0 đến 255
51-51-255 có nghĩa là: giá trị của màu red
là 51, giá trị của màu greenlà 51, giá trịcủa màu blue là 255
Trang 2957 Công cụ Web
Các định dạng hình ảnh GIF Format
tập tin hình ảnh phổ biến trên Internet vìdung lượng nhỏ và thể hiện một số tínhchất đặc biệt Có hai dạng GIF đặc biệt là:
Trang 3059 Công cụ Web
Trang 323 Công cụ Web
dùng để cung cấp tiêu đề cho phần nội
dung hiển thị trên trang web
Tất cả những phần tử tiêu đề phải có thẻ
kết thúc
in đậm hơn để phân biệt chúng với các
phần tử còn lại của văn bản
Ví dụ
Trang 335 Công cụ Web
Thẻ đoạn: <ADDRESS>
các thông tin như tác giả, địa chỉ, chữ ký
trong tài liệu HTML
ở cuối trang và có thể chứa một hoặc
BLOCKQUOTE được hiển thị như một
đoạn văn bản thụt vào đầu dòng
Ví dụ
Trang 347 Công cụ Web
Thẻ đoạn: <PRE>
văn bản trên trình duyệt với tất cả các
định dạng đã được xác định từ trước bởi
mã nguồn HTML
Ví dụ
Thẻ khối: <SPAN>, <DIV>
chia và nhóm nội dung lại với nhau
Phần tử DIV dùng để chia tài liệu thành
các thành phần có liên quan với nhau
các ký tự
dung trong dòng (in-line) còn phần tử DIV
dùng để định nghĩa nội dung mức khối
(block-level)
Ví dụ
Trang 359 Công cụ Web
<VAR>…</ VAR>
Sử dụng trong phần tríchcủa mã chương trình
<CODE>…</ CODE >
Nhấn mạnh văn bản
<EM>…</EM>
Mô tả Tên thẻ
Trang 3611 Công cụ Web
Danh sách
có liên quan với nhau trên tài liệu HTML
Quả
Táo Cam Xoài
Danh sách không có thứ tự
Danh sách không có thứ tự (unorder list)
là một “bulleted list” Các mục được bắt
đầu bằng dấu chấm tròn “bullet”
tự ta dùng cặp thẻ <UL>… </UL> Mỗi
mục con trong danh sách được bắt đầu
bằng thẻ <LI> (list item) không bắt buộc
phải có thẻ kết thúc </LI> Danh sách
có thể lồng nhau
Ví dụ
Trang 3713 Công cụ Web
Bắt đầu từ
số n > 1
<LITYPE = a>
Lowercase
<LITYPE = A>
Uppercase
<LITYPE = i>
Lower Roman
<LITYPE = I>
Upper Roman
Thẻ Thuộc tính
Danh sách định nghĩa
Danh sách định nghĩa (defined list) được
dùng để tạo ra một danh sách các điều
khoản và định nghĩa của chúng
Trang 3815 Công cụ Web
Thẻ kẻ đường ngang <HR>
Thẻ <HR> (horizontal rule) được dùng
để kẻ một đường ngang trên trang Nó
chỉ có thẻ bắt đầu, không có thẻ kết thúc
và không có nội dung
hiển thị là màu đặc không có bóng noshade
tính bằng pixel size (độ dày)
tính bằng pixel hay %, mặc định 100%.
trên toàn trang văn bản HTML Ngoài ra
có thể sử dụng thẻ <FONT> riêng cho
Trang 3917 Công cụ Web
Sử dụng màu sắc
vào các phần tử trong trang bằng cách
thêm thuộc tính color vào thẻ <BODY>,
<FONT>
Có 3 kiểu màu chính là đỏ (Red), xanh
(Green) và xanh da trời (Blue) Mỗi màu
chính được xem như một bộ hai số của
hệ thập lục phân (16 = số hex):
#RRGGBB
trong khi đó FF chỉ 100% của màu
bgcolor=“#rrggbb” hoặc tên màu
Chỉ ra màu nền của table
Trang 4019 Công cụ Web
Bảng biểu (tiếp theo)
border=number
Chỉ ra độ dày (theo pixel) của đường viền Giá trị
mặc định là 1 border=0: không hiển thị đường
viền
cellpadding=number
Xác lập khoảng cách (theo pixel) giữa đường viền
và nội dung trong ô Giá trị mặc định là 1
Cho trình duyệt biết vị trí vẽ đường viền
void: khung sẽ không hiển thị (mặc định)
above: chỉ vẽ khung ở bên trên
below: chỉ vẽ khung ở bên dưới
hsides: chỉ vẽ khung ở bên trên và bên dưới
vsides : chỉ vẽ khung ở bên trái và bên phải
lhs: chỉ vẽ khung ở bên trái
rhs: chỉ vẽ khung ở bên phải
box: vẽ khung toàn bộ
border: vẽ khung toàn bộ
Trang 4121 Công cụ Web
Bảng biểu (tiếp theo)
Cặp thẻ <TABLE>…< /TABLE> được dùng
để tạo bảng trong tài liệu HTML
Đơn vị cơ bản của bảng là một ô và được
Trang 4223 Công cụ Web
Định dạng Table
Thuộc tính COLSPAN và ROWSPAN được sử
dụng để tạo ra những ô mà chúng có thể
kéo rộng ra cho hơn một dòng hay cột
trong thẻ <TH>
dụng trong thẻ <TD>
Để canh lề cho các ô trong bảng ta sử dụng
thuộc tính canh lề ngang (ALIGN) và canh lề
bordercolor=”#rrggbb” hoặc tên màu
Xác lập màu cho đường viền của frame
frameborder=1|0
Bật/Tắt đường viền của frame
frameborder=1: có hiển thị đường viền
frameborder=0: không hiển thị đường viền
Trang 4325 Công cụ Web
Frame (tiếp theo)
longdesc=url
Xác định một liên kết đến văn bản chứa một
mô tả dài về frame và nội dung
marginwidth=number
Xác định khoảng cách (theo pixel) giữa cạnh
bên trái và cạnh bên phải của frame và nội
dung bên trong Giá trị tối thiểu là 1 pixel
marginheight=number
Xác định khoảng cách (theo pixel) giữa cạnh
bên trên và cạnh bên dưới của frame và nội
dung bên trong Giá trị tối thiểu là 1 pixel
Frame (tiếp theo)
name=text
Đặt tên cho frame Tên này được tham chiếu
bởi thuộc tính target bên trong liên kết muốn
tải nội dung một văn bản vào frame này
noresize
Ngăn chặn không cho người dùng thay đổi kích
thước frame
scrolling=yes|no|auto
Xác định có hiển thị các thanh trượt scrollbars
trên frame hay không
src=url
Xác định file HTML ban đầu hiển thị trên frame
Trang 4427 Công cụ Web
Frame (tiếp theo)
Xác định độ dày đường viền (theo pixel) giữa tất
cả các frame bên trong một frameset
bordercolor=#rrggbb” or color name
Xác lập màu cho tất cả đường viền bên trong
frameset
frameborder=1|0
Xác định đường viền giữa các frame bên trong
frameset
Frame (tiếp theo)
cols=list (number, percentage, or *)
Đưa ra số lượng và kích thước của các cột
(column) trong một frameset
rows=list (number, percentage, or *)
Đưa ra số lượng và kích thước của các hàng
(row) trong một frameset
framespacing=number
Khoảng cách thêm vào (theo pixel) giữa các
frame nằm liền kề nhau
Ví dụ
