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

Bài 01
Introduction to the Web
NexTGen Web
Giới thiệu về Web
Aptech Ltd.

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

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
Aptech Ltd.
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.

Giới thiệu
Aptech Ltd.
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:

Sự phát triển tính toán 1-2



!"!


Aptech Ltd.
#
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ố
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.

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.
Aptech Ltd.
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ý.
$
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à 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
Aptech Ltd.
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.
&
Web Communication 1-2
Aptech Ltd.
'
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.
Aptech Ltd.
(
Các trang web tĩnh
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
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
Aptech Ltd.

Các trang web động
Các trang web
động
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
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 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

Aptech Ltd.
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.
12Introduction to the Web / Session 1
Các công nghệ (Technologies)

Các công nghệ được sử dụng để tạo ra các trang Web động:
Aptech Ltd.
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.
Cascading Style Sheets (CSS)


Đâ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)
Aptech Ltd.

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
Tái sử dụng mã

Tái sử dụng mã
Độc lập thiết bị
Độc lập thiết bị
Giảm mã HTML
Giảm mã HTML
Aptech Ltd.
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.
#
Cách làm việc của CSS 1-2
Aptech Ltd.
16Introduction to the Web / Session 1
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.
Aptech Ltd.
%
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.
Aptech Ltd.
&
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 dựa trên AJAX.
Aptech Ltd.
Tóm tắt
'

*+!# ,  /01"023  4-4  5, *6"7"" +26 2
8"*+8 )

409:2 -;<*+!#2=- >0?-; @ A5BCABC A5BCABCADBC ABC ABC

A5BE

!.FG22HI@1JK25HL0I.2,M5"C4CN*+!C5,O*+!)

40P6H@4-CQD7CR"CDCS7"CEI2F2T2U209:2-;<*+!#5,
0"VWP6H-;X)