Đang tải... (xem toàn văn)
Giải thích sự tiến hóa của HTMLGiải thích cấu trúc một trang HTMLLiệt kê những hạn chế trong HTML 4 và XHTMLDanh sách các tính năng mới của HTML 5Giải thích CSSGiải thích JavaScriptGiải thích jQueryGiải thích jQueryCác trình duyệt hỗ trợ HTML 5Quá trình phát triển của HTML
NexTGen Web Bài 01 Giới thiệu Web Introduction to the Web Mục tiêu Giải thích tiến hóa HTML Giải thích cấu trúc trang HTML Liệt kê hạn chế HTML XHTML Danh sách tính HTML Giải thích CSS Giải thích JavaScript Giải thích jQuery Giải thích jQuery Các trình duyệt hỗ trợ HTML Quá trình phát triển HTML © Aptech Ltd. Introduction to the Web / Session Giới thiệu Ngôn ngữ đánh dấu siêu văn giới thiệu năm 1990. HTML giới thiệu chuẩn (standard) W3C từ năm 1997. HTML phiên phiên chuẩn mới. Phần lớn trình duyệt hỗ trợ phần tử giao diện lập trình ứng dụng (API - Application Programming Interface) HTML 5. © Aptech Ltd. Introduction to the Web / Session Sự phát triển tính toán 1-2 Ban đầu, toán thực thi máy tính độc lập (stand-alone) để thực thao tác tính toán khác Sau này, tổ chức bắt đầu kết nối máy tính họ để chia sẻ liệu. Dựa vào vị trí địa lý, hệ thống mạng phân chia sau: © Aptech Ltd. Local Area Network (LAN) Metropolitan Area Network (MAN) Wide Area Network (WAN) Introduction to the Web / Session Sự phát triển tính toán 2-2 LAN LAN là mạng mạng trong một phạm phạm vi vi địa địa lý lý nhỏ nhỏ MAN MAN là mạng mạng bao bao phủ phủ trong thành thành phố phố WAN WAN là mạng mạng của các mạng. mạng. Các Các mạng mạng LAN LAN và MAN MAN được kết kết nối nối phủ phủ khắp khắp toàn toàn cầu. cầu. © Aptech Ltd. Introduction to the Web / Session Web Internet 1-2 Mạng WAN làm gia tăng nhu cầu chia sẻ liệu khắp toàn cầu không giới hạn tổ chức. Điều dẫn đến phát triển Web gọi World Wide Web (WWW). Internet biết mạng WAN lớn nhất. Web cách để truy xuất thông tin việc sử dụng Internet. Nhiều máy tính kết nối với mà không phân biệt vị trí địa lý. © Aptech Ltd. Introduction to the Web / Session Web Internet 2-2 Thông Thông tin tin sẵn sẵn có có dưới Trang Trang Web Web là một tập tập tin tin có có dạng dạng các trang trang Web Web chứa chứa thông thông tin tin và chỉ thị thị Thông Thông tin tin được hiển hiển thị thị tới tới người người dùng dùng © Aptech Ltd. Introduction to the Web / Session Web Communication 1-2 Các trang web lưu trữ máy chủ Web (Web server) để chúng trở lên sẵn có Internet cho người sử dụng. Web server máy tính có tốc độ xử lý cao kết nối với Internet. Web server sử dụng làm máy chủ(host) hiển thị trang web trình duyệt Web. Trình duyệt Web hiển thị trang Web thông qua giao thức HTTP. HTTP giao thức cách trang Web lấy từ Web server. © Aptech Ltd. Introduction to the Web / Session Web Communication 2-2 Các bước hiển thị trang Web trình duyệt sau 1. Người dùng Uniform Resource Locator (URL) trang Web trình duyệt. 2. Trình duyệt phía client gửi yêu cầu URL tới Web server phù hợp 3. Web server xử lý yêu cầu gửi trang Web đáp ứng lại yêu cầu tới trình duyệt. © Aptech Ltd. Introduction to the Web / Session Các trang web tĩnh Nội Nội dung dung vẫn không không thay thay đổi đổi Bao Bao gồm gồm các nội nội dung dung như văn văn bản, bản, hình hình ảnh, ảnh, video video và vv vv Các Các trang trang Web Web tĩnh tĩnh Tập Tập trung trung vào vào việc việc trình trình bày bày nội nội dung dung Rất Rất đơn đơn giản giản để để thiết thiết kế kế nhưng không không cung cung cấp cấp tính tính tương tương tác tác © Aptech Ltd. Introduction to the Web / Session 10 Các trang web động Cho Cho phép phép thay thay đổi đổi nội nội dung dung và diện diện mạo mạo hiển hiển thị thị tùy tùy ý ý trong trình trình duyệt duyệt Dữ Dữ liệu liệu luôn được cập cập nhật nhật và tin tin cậy cậy Các trang web động Phát Phát sinh sinh nội nội dung dung theo theo yêu yêu cầu cầu khi người người dùng dùng cung cung cấp cấp dữ liệu liệu đầu đầu vào vào Cho Cho phép phép tương tương tác tác với với người người dùng dùng © Aptech Ltd. Introduction to the Web / Session 11 Các công nghệ (Technologies) Các công nghệ sử dụng để tạo trang Web động: JavaScript, ngôn ngữ kịch bản, sử dụng để tạo trang Web động CSS đưa định dạng cho trang Web tĩnh Web động. HTML có khả mở rộng sử dụng với JavaScript, hiển thị liệu người dùng định nghĩa yêu cầu trang web tải trình duyệt. HTML động sử dụng JavaScript CSS để làm cho trang web trở lên động chuyển đổi cảm quan (look and feel-giao diện) trang web. © Aptech Ltd. Introduction to the Web / Session 12 Cascading Style Sheets (CSS) Làm việc với HTML để cung cấp kiểu cách trực quan (visual styles) đến phần tử tài liệu. Là ngôn ngữ dựa quy tắc, đưa hướng dẫn (instruction) định dạng cho nội dung tài liệu HTML. Mục đích để tách biệt phần nội dung khỏi phần định dạng nó. Có thể định nghĩa bố cục trình bày định dạng nội dung file riêng biệt có phần mở rộng .css. Cho phép soạn thảo gộp qui tắc từ file .css khác. © Aptech Ltd. Đây công việc kết hợp so khớp(matching) với quy tắc(rule) từ tập tin khác gọi cascading. Introduction to the Web / Session 13 Các thuận lợi CSS Tái Tái sử sử dụng dụng mã mã Độc Độc lập lập thiết thiết bị bị Các Các thuận thuận lợi lợi của of of CSS CSS Giảm Giảm mã mã HTML HTML © Aptech Ltd. Introduction to the Web / Session 14 Cách làm việc CSS 1-2 Người sử dụng dùng URL để yêu cầu (request) trang từ trình duyệt. Server trả lại file HTML với file có liên quan image, audio, css Trình duyệt dùng rendering engine thực thi mã CSS kiểu vào file HTML. Sau trang Web hiển thị trình duyệt. © Aptech Ltd. Introduction to the Web / Session 15 JavaScript 1-2 Chức JavaScript Cho phép người dùng tạo mặt phẳng 2D để đồ họa trang bạn mà không cần sử dụng plug-in. Sử dụng Web Workers để phụ trách mã JavaScript để thực tính toán nâng cao. Truy cập dịch vụ Web mang liệu quay lại cho ứng dụng thời gian thực. Không yêu cầu plug-in đặc biệt để chạy(play) video. Cho phép tạo điều khiển playback riêng việc sử dụng JavaScript HTML. Sử dụng lưu trữ cục trình duyệt không đòi hỏi cookie trình duyệt. Có thể thực xử lý đầy đủ video trình duyệt. © Aptech Ltd. Introduction to the Web / Session 16 JavaScript 2-2 Chức JavaScript Giúp nhà thiết kế web chèn đoạn mã vào trang HTML mà không cần phải có kiến thức chuyên sâu lập trình. Có thể sử dụng để thực thi kiện dựa vào hành động người dùng Có thể sử dụng JavaScript để thao tác phần tử HTML. Có thể thu thập thông tin trình duyệt mà khách viếng thăm dùng để truy cập Web site. © Aptech Ltd. Introduction to the Web / Session 17 jQuery Là thư viện JavaScript hỗ trợ nhiều trình duyệt. Làm đơn giản hóa việc viết kịch phía client cho trang HTML. Thư viện jQuery cho phép tạo ứng dụng Web động mạnh mẽ. Các tính jQuery Cú pháp dễ hiểu giúp dễ dàng duyệt phần tử tài liệu. Quản lý kiện. Các hiệu ứng(effects) hoạt họa (animation) cải tiến. Phát triển ứng dụng Web dựa AJAX. © Aptech Ltd. Introduction to the Web / Session 18 Tóm tắt HTML5 dự án hợp tác World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG). Các tính HTML5 gồm có thẻ , , , , , , , … Một số công nghệ sử dụng cho việc tạo Web site động JavaScript, CSS, XHTML, DHTML. Các trình duyệt Chrome, Firefox, Opera, Safari, Internet Explorer, … cố gắng bổ sung tính HTML5 vào phiên trình duyệt nhất. © Aptech Ltd. Introduction to the Web / Session 19 [...]... Introduction to the Web / Session 1 11 Các công nghệ (Technologies) Các công nghệ được sử dụng để tạo ra các trang Web động: JavaScript, một ngôn ngữ kịch bản, được sử dụng để tạo ra các trang Web động CSS đưa ra các định dạng cho cả trang Web tĩnh và Web động HTML có khả năng mở rộng khi được sử dụng với JavaScript, hiển thị dữ liệu người dùng định nghĩa được yêu cầu mỗi khi trang web được tải trong... © Aptech Ltd Introduction to the Web / Session 1 18 Tóm tắt HTML5 là một dự án hợp tác giữa World Wide Web Consortium (W3C) và Web Hypertext Application Technology Working Group (WHATWG) Các tính năng mới của HTML5 gồm có các thẻ mới như , , , , , , , … Một số công nghệ được sử dụng cho việc tạo các Web site động là JavaScript, CSS,... the Web / Session 1 16 JavaScript 2-2 Chức năng của JavaScript Giúp nhà thiết kế web chèn các đoạn mã vào các trang HTML mà không cần phải có kiến thức chuyên sâu về lập trình Có thể được sử dụng để thực thi các sự kiện dựa vào các hành động nào đó của người dùng Có thể sử dụng JavaScript để thao tác các phần tử HTML Có thể thu thập thông tin về trình duyệt mà khách viếng thăm đang dùng để truy cập Web. .. và các kiểu vào file HTML Sau đó trang Web được hiển thị trong trình duyệt © Aptech Ltd Introduction to the Web / Session 1 15 JavaScript 1-2 Chức năng của JavaScript Cho phép người dùng tạo mặt phẳng 2D để đồ họa trong trang của bạn mà không cần sử dụng các plug-in Sử dụng Web Workers để phụ trách mã JavaScript để thực hiện tính toán nâng cao Truy cập dịch vụ Web bất kỳ và mang dữ liệu quay lại cho... khớp(matching) với các quy tắc(rule) từ các tập tin khác nhau được gọi là cascading Introduction to the Web / Session 1 13 Các thuận lợi của CSS Tái sử dụng mã Tái sử dụng mã Độc lập thiết bị Độc lập thiết bị Các thuận lợi của of Các thuận lợi của of CSS CSS Giảm mã HTML Giảm mã HTML © Aptech Ltd Introduction to the Web / Session 1 14 Cách làm việc của CSS 1-2 Người sử dụng dùng URL để yêu cầu (request) một trang... the Web / Session 1 17 jQuery Là một thư viện JavaScript hỗ trợ nhiều trình duyệt Làm đơn giản hóa việc viết kịch bản phía client cho các trang HTML Thư viện jQuery cho phép tạo các ứng dụng Web động và mạnh mẽ Các tính năng của jQuery Cú pháp dễ hiểu giúp dễ dàng duyệt các phần tử trong tài liệu Quản lý các sự kiện Các hiệu ứng(effects) và hoạt họa (animation) được cải tiến Phát triển ứng dụng Web. .. liệu người dùng định nghĩa được yêu cầu mỗi khi trang web được tải trong trình duyệt HTML động sử dụng JavaScript và CSS để làm cho các trang web trở lên động và chuyển đổi cảm quan (look and feel-giao diện) của các trang web © Aptech Ltd Introduction to the Web / Session 1 12 Cascading Style Sheets (CSS) Làm việc cùng với HTML để cung cấp các kiểu cách trực quan (visual styles) đến các phần tử của tài... cho việc tạo các Web site động là JavaScript, CSS, XHTML, và DHTML Các trình duyệt như Chrome, Firefox, Opera, Safari, Internet Explorer, … đang cố gắng bổ sung các tính năng mới của HTML5 vào các phiên bản trình duyệt mới nhất © Aptech Ltd Introduction to the Web / Session 1 19 ...Các trang web động Cho phép thay đổi nội dung và diện Cho phép thay đổi nội dung và diện mạo hiển thị tùy ý trong trình duyệt mạo hiển thị tùy ý trong trình duyệt Dữ liệu luôn được cập nhật và tin Dữ liệu luôn được cập nhật và tin cậy cậy Các trang web động Phát sinh nội dung theo yêu cầu Phát sinh nội dung theo yêu cầu khi người . Bài 01 Introduction to the Web NexTGen Web Giới thiệu về Web Aptech Ltd. Mục tiêu Giải. $ Web và Internet 1-2 Aptech Ltd. % Web và Internet 2-2 Thông tin sẵn có dưới dạng các trang Web Thông tin sẵn có dưới dạng các trang Web Trang Web là. thị các trang web trên trình duyệt Web. Trình duyệt Web hiển thị các trang Web thông qua giao thức HTTP. HTTP là một giao thức chỉ ra cách một trang Web sẽ được lấy như thế nào từ Web server.