Tài liệu Bài giảng môn công cụ web

  • Số trang: 260 |
  • Loại file: PDF |
  • Lượt xem: 225 |
  • Lượt tải: 2
tranvantruong

Đã đăng 3224 tài liệu

Mô tả:

bài giảng môn công cụ web
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
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ư:   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ẻ


 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 -

Xemtailieu.com là thư viện tài liệu trực tuyến, nơi chia sẽ trao đổi tài liệu như luận văn đồ án, sách, giáo trình, đề thi, truyện đọc.v.v.. Với kho tài liệu khủng lên đến hàng triệu tài liệu tại Xemtailieu.com hy vọng đáp ứng được nhu cầu của các thành viên.