HTML5 XP session 01 giới thiệu về web t1

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

Trang 1

Bài 01

Introduction to the

Web

NexTGen Web

Giới thiệu về Web

Trang 2

Mục tiêu

 Giải thích sự tiến hóa của HTML

 Giải thích cấu trúc một trang HTML

 Liệt kê những hạn chế trong HTML 4 và XHTML

 Danh sách các tính năng mới của HTML 5

 Giải thích CSS

 Giải thích JavaScript

 Giải thích jQuery

 Các trình duyệt hỗ trợ HTML 5

 Quá trình phát triển của HTML

Trang 3

Giới thiệu

Ngôn ngữ đánh dấu siêu văn bản được giới thiệu năm 1990

HTML 4 được giới thiệu là một chuẩn (standard) bởi W3C từ năm 1997

HTML 5 là phiên bản kế tiếp và là một phiên bản chuẩn mới

Phần lớn các trình duyệt đều hỗ trợ phần tử và giao diện lập trình ứng dụng (API - Application Programming Interface) của HTML

5

Trang 4

Sự phát triển tính toán 1-2

 Local Area Network (LAN)

 Metropolitan Area Network (MAN)

 Wide Area Network (WAN)

Ban đầu, các bài toán được thực thi trên máy tính độc lập (stand-alone) để thực hiện các thao tác tính toán khác nhau

Sau này, các tổ chức bắt đầu kết nối các máy tính của họ để chia

sẻ dữ liệu

Dựa vào vị trí địa lý, hệ thống mạng được phân chia như sau:

Trang 5

Sự phát triển tính toán 2-2

LAN là mạng

trong một phạm

vi địa lý nhỏ

LAN là mạng

trong một phạm

vi địa lý nhỏ

MAN là mạng bao phủ trong thành phố

WAN là mạng của các mạng Các mạng LAN và MAN được kết nối phủ khắp toàn cầu.

Trang 6

Web và Internet 1-2

Mạng WAN làm gia tăng nhu cầu chia sẻ dữ liệu trên khắp toàn cầu chứ không chỉ giới hạn trong một tổ chức

Điều này dẫn đến sự phát triển của Web còn được gọi là World Wide Web (WWW)

Internet được biết là một mạng WAN lớn nhất

Web là cách để truy xuất thông tin bằng việc sử dụng Internet

Nhiều máy tính được kết nối với nhau mà không phân biệt vị trí địa lý

Trang 7

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à một tập tin có chứa thông tin và

chỉ thị

Trang Web là một tập tin có chứa thông tin và

chỉ thị

Thông tin được hiển thị tới người dùng Thông tin được hiển thị tới người dùng

Trang 8

Web Communication 1-2

Các trang web được lưu trữ trên một máy chủ Web (Web server)

để chúng trở lên luôn sẵn có trên Internet cho người sử dụng

Web server là một máy tính có tốc độ xử lý cao và được kết nối

với Internet

Web server được sử dụng làm máy chủ(host) và hiển 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

Trang 9

Web Communication 2-2

1 Người dùng chỉ ra Uniform Resource Locator (URL) của trang Web trên trình duyệt.

 Các bước hiển thị một trang Web trong một trình duyệt như sau

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 và gửi trang Web đáp ứng lại yêu cầu tới trình duyệt.

Trang 10

Các trang web tĩnh

Các trang Web tĩnh

Bao gồm các nội

dung như văn

bản, hình ảnh,

video và vv

Bao gồm các nội

dung như văn

bản, hình ảnh,

video và vv

Tập trung vào việc trình bày nội dung

Rất đơn giản để thiết

kế nhưng không cung cấp tính tương tác

Rất đơn giản để thiết

kế nhưng không cung cấp tính tương tác

Nội dung vẫn không thay đổi Nội dung vẫn không thay đổi

Trang 11

Các trang web động

Dữ liệu luôn được

cập nhật và tin cậy

Dữ liệu luôn được

cập nhật và tin cậy

Phát sinh nội dung theo yêu cầu khi người dùng cung cấp dữ liệu đầu vào

Cho phép tương tác với người dùng

Cho phép thay đổi nội dung và diện mạo hiển thị tùy ý trong

trình duyệt

Cho phép thay đổi nội dung và diện mạo hiển thị tùy ý trong

trình duyệt

Trang 12

Các công nghệ (Technologies)

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

 Các công nghệ được sử dụng để tạo ra các trang Web động:

Trang 13

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 liệu

Là một ngôn ngữ dựa trên quy tắc, đưa ra các hướng dẫn

(instruction) định dạng cho nội dung trong một tài liệu HTML

Mục đích là để tách biệt phần nội dung khỏi phần định dạng của nó

Có thể định nghĩa bố cục trình bày và định dạng nội dung trong một file riêng biệt có phần mở rộng là css

Cho phép soạn thảo hoặc gộp các qui tắc từ các file css khác

 Đây là công việc kết hợp và so 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.

Trang 14

Các thuận lợi của CSS

Các thuận lợi của of

CSS

Các thuận lợi của of

CSS

Giảm mã HTML

Trang 15

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 từ trình

duyệt.

Người sử dụng dùng URL để yêu

cầu (request) một trang từ trình

duyệt.

Server trả lại file HTML cùng với

các file có liên quan như image,

audio, css

Server trả lại file HTML cùng với

các file có liên quan như image,

audio, css

Trình duyệt dùng rendering engine

thực thi mã CSS và các kiểu vào file

HTML.

Trình duyệt dùng rendering engine

thực thi mã CSS và các kiểu vào file

HTML.

Sau đó trang Web được hiển thị

trong trình duyệt.

Sau đó trang Web được hiển thị

trong trình duyệt.

Trang 16

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 các ứng dụng trong thời gian thực

Không yêu cầu bất kỳ plug-in đặc biệt nào để chạy(play) video.

Cho phép tạo ra điều khiển playback riêng bằng việc sử dụng JavaScript và HTML

Sử dụng lưu trữ cục bộ của trình duyệt và không đòi hỏi cookie của trình duyệt.

Có thể thực hiện xử lý đầy đủ video trong trình duyệt.

Trang 17

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 site.

Trang 18

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 dựa trên AJAX.

Trang 19

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ư <canvas>,

<article>, <nav>, <header>, <footer>, <section>, <audio>, <video>…

 Một số công nghệ được sử dụng 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

Định dạng
Số trang	19
Dung lượng	647,95 KB