[ClubITviet.com]Gioi Thieu Tong Quan Ve Html5

Giới thiệu tổng quan về HTML5 http://clubitviet.com

Page 1

Giới thiệu tổng quan về HTML5

Hi, xin chào các bạn.

Nếu là một web designer, hoặc là một newbie đang tìm hiểu về web, mình nghĩ các bạn sẽ bắt

gặp từ ‗html5‘ rất nhiều trên internet hiện nay!

Với nhiều bạn lập trình web có kinh nghiệm, thì ít nhiều cũng biết được những cái mới và hay

của html5 so với html4. Tuy nhiên, những bạn mới tìm hiểu thì có vẻ hơi khó, do hiện nay, tài

liệu html5 bằng tiếng việt là khá hiếm.

Mình cũng là một trong những người mới bắt đầu, và tình cờ biết được trang http://html5vn.net,

ở đây có khá nhiều hướng dẫn về html5 bằng tiếng việt khá hay. Vì vậy, mình mạo muội tổng

hợp các bài này lại cho mọi người dễ đọc mà chưa xin phép html5vn.net.

Tài liệu được tổng hợp trong thời gian ngắn, chủ yếu là để giúp cho mọi người có thể theo dõi

được xuyên suốt các bài viết riêng biệt từ http://html5vn.net, vì vậy chắc chắn trong tài liệu có

rất nhiều sai sót, rất mong các bạn thông cảm ^-^!

Tài liệu này được tổng hợp và được share chính thức tại http://clubitviet.com! Xin vui lòng ghi

rõ nguồn khi phát hành tài liệu này trên các website khác!

Xin chân thành cảm ơn các tài liệu của http://html5vn.net và xin bỏ qua vì tài liệu này được tổng

hợp mà chưa được cho phép.

Nội Dung:

I. HTML5 là gì ?............................................................................................................................ 4

II. HTML5 có gì mới ........................................................................................................................... 6

III. Điểm mạnh của HTML5 ............................................................................................................. 10

IV. HTML5 Tag ................................................................................................................................ 13

V. HTML5 Video .............................................................................................................................. 17

HTML5 <video> – Làm sao để đưa các chức năng vào ? ............................................................. 20

HTML5 <video> – Methods, Properties, and Events ................................................................... 21

Dùng javascript điều khiển video trong html5 .................................................................................. 23

http://html5vn.net/

http://html5vn.net/

http://clubitviet.com/

http://html5vn.net/


Page 2

VI. HTML5 Audio............................................................................................................................. 24

Play file mp3 trong html5 .................................................................................................................. 24

Play audio trong html5 dùng javascript ............................................................................................. 25

VII. HTML5 Drag and Drop ............................................................................................................. 26

VIII. HTML5 Canvas ........................................................................................................................ 27

1. HTML5 Canvas – Cấu trúc và tọa độ ........................................................................................... 27

Tại sao chúng ta cần Canvas ..................................................................................................... 27

Cần gì để tìm hiểu <canvas> ..................................................................................................... 28

2. HTML5 Canvas Line .................................................................................................................... 30

HTML5 Canvas Curves – Arc ........................................................................................................... 35

HTML5 Canvas – Quadratic Curve .................................................................................................. 37

Cắt một vùng chọn với phương thức clip ...................................................................................... 45

7. HTML5 Canvas images ................................................................................................................ 50

HTML5 Canvas image size – lấy kích thươc cho ảnh ...................................................................... 51

HTML5 Canvas image Crop – cắt ảnh .............................................................................................. 52

HTML Canvas image Loader ............................................................................................................ 55

8. HTML5 Canvas Text Font & Size ................................................................................................ 56

HTML5 Canvas Text Color............................................................................................................... 56

Canvas Text Stroke............................................................................................................................ 57

HTML5 Canvas Text Align............................................................................................................... 57

Tạo bóng đổ trong HTML5 Canvas .................................................................................................. 58

Xử lý 2 đối tượng chồng nhau trong HTML5 Canvas ...................................................................... 59

Dịch chuyển một đối tượng trong HTML5 Canvas .......................................................................... 60

Xoay chuyển một đối tượng trong HTML5 Canvas .......................................................................... 61


Page 3

Kéo giãn một đối tượng trong khung HTML5 Canvas ..................................................................... 61

Xoay lật 1 đối tượng trong HTML5 Canvas ..................................................................................... 62

IX. HTML5 SVG............................................................................................................................... 63

Xử lý SVG trong trang html .............................................................................................................. 64

X. HTML5 trong tương lai ................................................................................................................ 65


Page 4

I. HTML5 là gì ?

HTML5 là phiên bản sửa đổi thứ 5 của ngôn ngữ World Wide Web: the Hypertext Markup

Language (HTML). HTML5 sẽ cho phép một lớp ứng dụng web mới ra đời, hỗ trợ nội dung đa

phương tiện và các tính năng offline mà không cần đến những công nghệ độc quyền đi kèm.

Nhóm Web Hypertext Application Technology Working Group (WHATWG) đã bắt đầu nghiên

cứu về các đặc tính của HTML5 từ tháng 10/2009, dưới dự án Web Applications 1.0.

Năm 2022 mới hoàn thiện

Mặc dù hiện nay HTML 5 được nói đến rất nhiều và các công trình nghiên cứu về HTML5 đã

bắt đầu từ giữa những năm 2000, song các đặc tính kỹ thuật của nó dự kiến sẽ được hoàn thiện

vào tận năm 2022. HTML4 chính thức xuất bản vào năm 1999.

Chính xác thì các công trình nghiên cứu về HTML5 bắt đầu vào tháng 6/2004, do các tổ chức

World Wide Web Consortium HTML Working Group (W3C HTML WG) và WHATWG cùng

phối hợp thực hiện.

Ian Hickson, biên tập kỹ thuật của HTML5, nói ông hy vọng những đặc tính kỹ thuật của

HTML5 sẽ được trình lên W3C Candidate Recommendation vào năm 2012 và lên W3C

Recommendation vào năm 2022. Tuy nhiên, nhiều đặc tính kỹ thuật của HTML5 đã ổn định và

có thể được ứng dụng ngay từ bây giờ.

Theo Hickson, khung thời gian đệ trình và thử nghiệm kỹ thuật HTML5 là:

- Dự thảo đầu tiên gửi lên W3C vào tháng 10/2007.

- Dự thảo cuối cùng vào tháng 10/2009.


Page 5

- Kêu gọi thử nghiệm vào năm 2011.

- Bản Đề cử (Candidate Recommendation) vào năm 2012.

- Dự thảo bộ thử nghiệm đầu tiên vào năm 2012.

- Dự thảo thử nghiệm thứ hai vào năm 2015.

- Phiên bản thử nghiệm cuối cùng vào năm 2019.

- Phát hành lại Dự thảo Last Call Working Draft vào năm 2020.

- Đề cử dự kiến vào năm 2022.

HTML5 sẽ thay thế HTML4, DOM2 HTML và XHTML 1.

HTML5 giảm bớt sự phụ thuộc vào các công nghệ độc quyền

Ngôn ngữ web HTML5 ra đời nhằm mục đích giảm bớt sự phụ thuộc và cần thiết của những

công nghệ ứng dụng Internet độc quyền như Adobe Flash, Microsoft Silverlight và Sun JavaFX.

Tuy nhiên, phải mất rất nhiều năm nữa mới đạt đến mục tiêu đó. Ngôn ngữ HTML4 không cho

phép nhúng hay kiểm soát các nội dung đa phương tiện, trái lại, các yếu tố video và audio mới

của HTML5 cho phép các nhà phát triển nhúng và kiểm soát các nội dung đa phương tiện mà

không cần đến Flash.HTLM5 còn cho phép giao tiếp 2 chiều với máy chủ, vì thế các nhà phát

triển có thể thử nghiệm game, chat, điều khiển từ xa….

Những tính năng của HTML5 như Canvas, lưu trữ nội bộ và Web Workers cho phép các nhà

phát triển nâng cấp trình duyệt web theo những cách mà công nghệ trước đó không cho phép.

Opera Software được xem là hãng đi đầu trong việc triển khai công nghệ HTML5 trong trình

duyệt của hãng.

Tất cả các hãng trình duyệt lớn hiện nay, như Mozilla, Opera, Microsoft, Apple và Google đều

đang tham gia định hình các đặc tính kỹ thuật của HTML5 và hỗ trợ ngôn ngữ web mới này, dù

các đặc tính vẫn chưa được thông qua cuối cùng.

Trình duyệt Chrome của Google hiện đã có một số tính năng HTML5 như video tag. Vì thế cho

đến nay, các trình duyệt Google Chrome, Apple Safari, Opera và Firefox đều hỗ trợ video


Page 6

HTML5. Tuy vậy, Opera và Firefox không hỗ trợ phiên bản mã h.264 dùng cho các video của

YouTube và Vimeo. Trong khi đó, Internet Explorer của Microsoft lại chưa hỗ trợ video

HTML5. Tuy vậy, người dùng IE có thể sử dụng video HTML5 bằng cách cài đặt thêm plug-in

nguồn mở Chrome Frame của Google. Hiện nay YouTube và Vimeo cũng đã tuyên bố hỗ trợ

video HTML5.Hệ điều hành webOS của Palm cũng hỗ trợ cơ sở dữ liệu HTML5 và Palm cũng

hỗ trợ tính năng bản đồ dựa trên HTML5 trên Palm Pre.

Microsoft đã bắt đầu triển khai HTML5 trong Internet Explorer 8. Đại gia phần mềm đang bổ

sung các tính năng HTML5 như lưu trữ nội bộ, điều hướng AJAX.

II. HTML5 có gì mới

HTML5 mang lại cho người dùng trải nghiệm lướt Web hoàn toàn mới, nhanh hơn, ổn định hơn

và bảo mật hơn. HTML5 sẽ giúp các nội dung trên Web hoạt động tốt hơn mà không cần phụ

thuộc vào bất kì một ứng dụng phụ trợ nào khác.

HTML5 – Mang đến sức sống mới cho Web

Không những mang lại những lợi ích to lớn như hoạt động nhanh, ổn dịnh và bảo mật hơn. Bên

cạnh đó, HTML5 có khả năng hỗ trợ API (Application Programming Interface) và DOM

(Document Object Model) sẽ cho phép dễ dàng mở rộng, giúp các nhà phát triển tự do sáng tạo

trong việc tạo ra các ứng dụng thân thiện và hữu ích hơn.


Page 7

Hơn thế, với HTML5, mọi thiết bị từ máy tính cá nhân đến các thiết bị di động sẽ có thể dễ dàng

tiếp cận nội dung, tức là sẽ không còn khác biệt nữa, chỉ cần duy nhất một điều kiện : trình duyệt

bạn đang dùng phải hỗ trợ HTML5, nhưng điều này có lẻ không còn là điều kiện khó giải quyết

khi hầu hết các trình duyệt phổ biến đều hỗ trợ mạnh mẽ HTML5, từ : Firefox, Chrome,

Opera, Internet Explorer đến các trình duyệt trên iOS, Android đều hỗ trợ tốt HTML5.

Với HTML5, các nhà phát triển chỉ cần xây dựng ứng dụng 1 lần, nó có thể hoạt động tốt trên tất

cả các thiết bị, không như Flash hoặc Silverlight đòi hỏi phải cài đặt plugin để có thể hiển thị nội

dung.

HTML5 – Nội dung đã đa dạng hơn, được hỗ trợ tốt hơn

Thời gian trước, báo chí và các nhà phát triển đã tốn nhiều giấy mực để nói về những gì mà

HTML5 có thể mang lại, so sánh giữa HTML5 và Flash vốn chiếm phần lớn nội dung trên Web.

Flash lâu nay vẫn chiếm phần lớn nội dung trên Web nhưng hiện nay nó đã và đang dần bị thay

thế bởi HTML5.


Page 8

Huyền thoại Steve Jobs đã từng đưa ra quan điểm rất rõ ràng, Flash sẽ không bao giờ xuất hiện

trên các thiết bị di động của Apple, và cũng đưa ra sự ủng hộ tuyệt đối vào HTML5. Quan điểm

này thể hiện rõ ràng đến nỗi Steve Jobs đã viết 1 bức thư và đăng trên trang chủ của Apple để thể

hiện quan điểm này và xóa tan những mong muốn đưa Flash lên iOS của người dùng.

Bên cạnh những lợi ích mà HTML5 mang lại, giới phát triển cũng chỉ ra những hạn chế rất lớn

của Flash, đó là sự bất ổn định, làm thiết bị hoạt động nóng hơn và hao pin hơn, phải yêu cầu cài

Plugin để hoạt động. Và Flash không phải là tối ưu cho các thiết bị di động khi vấn đề về PIN

trên các thiết bị này luôn là mối quan tâm lớn của người dùng.

Hiện nay, nhiều trang web và dịch vụ lớn đã chuyển sang dùng HTML5, có thể kể đến trong số

đó là Youtube, Nokia Maps… Ngoài ra, rất nhiều games được xây dựng bằng HTML5 đã xuất

hiện, trong số đó có các games nổi tiếng như Angry Bird, Fieldrunners… Cho thấy HTML5 ngày

càng được quan tâm và phát triển nhiều hơn.

HTML5 thay thế Flash, đã đến lúc?

Với sự quan tâm ngày càng lớn mà các nhà phát triển dành cho HTML5 cho thấy thời gian tới,

HTML5 sẽ ngày một phát triển mạnh mẽ hơn. Đây không phải là một điều quá bất ngờ, vì với

những gì mà HTML5 mang lại, đó là sự lựa chọn thực sự đúng đắn và người sử dụng Web sẽ

được hưởng lợi rất nhiều.

Thời gian trước, Google đã phát triển công cụ Google Swiffy cho phép người dùng chuyển đổi

nội dung Flash sang HTML5, Adobe mua lại Nitobi – công ty sáng lập bộ khung lập trình ứng

dụng PhoneGap và PhoneGap Build cho phép lập trình viên phát triển ứng dụng nền tảng cross-

flatform trên di động với HTML5 và Javascript. Bên cạnh đó, bản thân Adobe cũng cho ra đời

công cụ mang tên Wallaby cho phép chuyển nội dung từ Flash sang HTML5.


Page 9

Và ngày 09/11 đánh dấu bước tiến quan trọng của HTML5 khi chinh Adobe tuyên bố sẽ ngừng

phát triển Flash trên các thiết bị di động mà thay vào đó là tập trung phát triển HTML5. Với giới

công nghệ, đây có thể là một bước ngoặt quan trọng. Adobe cho biết họ vẫn sẽ tung các bản sửa

lỗi, nhưng sẽ không phát triển Flash trên các thiết bị di động nữa, và Flash Player 11.1 sẽ là

phiên bản nâng cấp cuối cùng.

―Hiện tại HTML5 đã được triển khai rộng rãi trên nhiều nền tảng khác nhau, nó sẽ trở thành giải

pháp tốt nhất cho việc phát triển nội dung trên trình duyệt của thiết bị di động‖ – Adobe cho biết.

Với thông báo trên, có thể thấy hiện tại ngay cả Adobe cũng đang dần từ bỏ Flash để tập trung

phát triển HTML5 vì một chuẩn Web chung cho tương lai.

Lời kết

Bài viết trên không tập trung nêu ra những điểm mạnh và lợi ích mà HTML5 mang lại, vì đã có

rất nhiều bài viết khác đề cập về vấn đề này. Bài viết chỉ nhắc lại những lợi ích chính, và phân

tích những sự kiện để chứng tỏ HTML5 đang ngày càng phát triển và sẽ là chuẩn Web của tương

lai.

Với HTML5, người dùng Web sẽ có được một trải nghiệm hoàn toàn mới, bạn có thể thoải mái

xem Video, chơi games trên trình duyệt với mọi thiết bị mà không cần quan tâm đến các thành

phần bổ sung cần phải cài thêm. Với các thiết bị di động như Smartphone, Tablet, người dùng sẽ


Page 10

không còn lo lắng về hiệu năng cũng như thời lượng sử dụng PIN nữa. Vì HTML5 đã tối ưu hóa

cho những lo ngại đó.

III. Điểm mạnh của HTML5

Các Websites tinh xảo sẽ phát triển mạnh mẽ và dễ dàng hơn khi HTML5 trở nên thông

dụng. Sau đây là 9 tiện ích của HTML5.

Đó là lý do tại sao những chương trình nặng vẫn có thể hoạt động được. Những người phát triển

trình duyệt cũng như nhiều người khác có rất nhiều ý tưởng để nâng cấp trình duyệt và Web,

điều này dẫn đến sự ra đời của trình duyệt thế hệ 5.

HTML5 sẽ làm thay đổi rất nhiều khía cạnh của cuộc sống trên Web. Nó không thay thế Flash

hay Shockwave: được dùng ít trong trò chơi ở Miniclip.com. Điều này cho thấy HTML5 ảnh

hưởng đến thế nào. Tuy nhiên, HTML5 thiết kế lại Web và cho phép các Websites cơ bản có

nhiều tiện ích hơn. HTML5 tags sẽ thay thế plug-in trong những việc đơn giản cũng như làm cho

Web bảo mật hơn và hiệu quả hơn.

Để biết rõ hơn những chuẩn mới mà thẻ HTML có, trong bài báo này chúng tôi xin đưa ra ý kiến

của một số nhà phát triển, lập trình và thiết kế. Dưới đây là những tiện ích khi HTML5 được ứng

dụng và được chuẩn hóa trên Web:

HTML5 làm giảm tầm quan trọng của các plug-ins

Trước đây, câu chuyện về Web gắn với plug-in hay add-on của một trình duyệt bởi nó khuyến

khích sự sáng tạo cũng như sự trải nghiệm. Âm thanh, ảnh động hay những thủ thuật khác xuất

hiện trên Web thông qua plug-ins, phát triển bởi Sun, Adobe, RealAudio, Microsoft và rất nhiều

hãng khác. Giao diện plug-ins mở đối với tất cả và mọi người có thể trải nghiệm bằng cách thêm

những tính năng mới.


Page 11

Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnh mới được từ HTML5

cũng đe dọa tới hệ mã lệnh. JavaFX là lý tưởng, nhưng ai là người muốn học một loại cú pháp

mới trong khi JavaScrip và Canvas đang làm rất tốt. Ai cần hệ thống Real khi các video sẽ được

chuyển thành audio và video? Plug-in dường như sẽ bị lãng quên.

Plug-ins sẽ bị biến mất hoặc không được dùng? Có thể, nhưng nó còn phụ thuộc vào việc làm

của bạn. Nếu bạn muốn vẽ hình ảnh, Canvas là thích hợp nhất. Nhưng nếu muốn vẽ một thế giới

3-D đặc biệt, giống như trong các trò chơi Flash và Shockwave phức tạp, bạn sẽ phải dùng tới

plug-in khi nó có thể kết nối trực tiếp tới video cũng như chạy thế giới game 3-D.

HTML5 hỗ trợ đồ họa tương tác

Web cũ tải hình ảnh bằng cách tải file GIF hay JPG. Web mới có thể xây dựng hình ảnh trên

Canvas. Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho đồ họa của Website trở nên tương

tác hơn.

Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu. Mọi thứ trở nên sống

động khi những lập trình viên có thời gian để đưa ra giải pháp. Adobe mới đây đã bắt đầu phát

triển đồ họa tinh xảo cho HTML5. Sự xuất hiện của những công cụ này sẽ mở đầu cho những

khả năng mới cũng như đồ họa sẽ được tinh xảo hơn hiện nay.

HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file

Những người lập trình Web thường lưu trữ một lượng lớn thông tin trong các cookies (300

cookies tương đương với 4096 byte). Bộ công cụ dùng plug-in Flash để trưng dụng lựa chọn từ ổ

đĩa là phiên bản đầu của bộ công cụ Dojo. Tuy nhiên, giờ đây chỉ cần sử dụng HTML5 là được.

Lập trình viên có thể lưu trữ bất cứ thứ gì họ muốn. Điều này giúp việc cài đặt các ứng dụng dễ

dàng hơn giống như các ứng dụng cũ. Các ứng dụng chạy mã JavaScript từ ứng dụng lưu trữ

HTML5 ngoại tuyến và hoạt động ngay cả khi kết nối Web đang hoạt động.

Phương pháp này không ảnh hưởng tới hoạt động phát triển nhóm ―đám mây‖ bởi những dữ liệu

có thể hoạt động như những lưu trữ thông minh. Lập trình game có thể lưu trữ theo vùng những

phần mô tả và ảnh minh họa, giúp tiết kiệm thời gian tải thông tin nhiều lần.

Ngược lại, những dữ liệu này sẽ được lưu trữ trong các tệp tin hệ thống. Thế nên việc lấy lại dữ

liệu không phải là dễ dàng. Người dùng muốn chuyển dữ liệu từ máy này sang máy khác sẽ gặp

phải khó khăn.

HTNL5 sẽ đơn giản hóa chia nhỏ dữ liệu với cyborg data

Ai đã từng chia nhỏ dữ liệu từ các trang web đều biết rằng HTML không giúp được nhiều ngoại

trừ giúp trình duyệt nơi đặt dữ liệu. Microformats trong HTML5 cung cấp các phương pháp tinh

xảo giúp việc phân tích dữ liệu dễ dàng hơn.

Không ai có thể dự đoán microformats có thể thay đổi Web tới mức nào nhưng rất dễ để thấy

được nó đã giúp các lập trình viên có nhiều giải pháp hơn.


Page 12

HTML5 giúp hợp nhất các địa chỉ

Đối với máy chủ Web, địa chỉ máy tính của chúng ta đơn thuần chỉ là những con số ẩn danh.

Chuẩn HTML5 cho phép các trình duyệt định vị vị trí của người dùng. Tuy nhiên, nó sẽ không

hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi), nhưng nó lại hoạt động tốt với

smartphone cầm tay.

HTML5 làm video của Web đẹp hơn

Chuẩn HTML5 giúp các nhà lập trình tiếp hợp videp dễ dàng hơn với thông tin trên trang, cung

cấp các ứng dụng tới lập trình viên jQuery và PHP ngoài Flash, Silverlight hay JavaFX.

Mọi người đều muốn cung cấp mã nguồn mở để mở những hình ảnh động và âm thanh tương

ứng dẫn đến việc không thống nhất. Chuẩn HTML5 sẽ là mã nguồn mở trung gian, có nghĩa là

chúng ta thay đổi cách gọi từ plug-in thành codec. Tuy nhiên, dù ta có chuẩn video nhưng trình

duyệt lại rất khó để dịch dữ liệu.

Mặc dù vẫn còn sự cân nhắc cũng như thiếu sự nhất trí hoàn toàn, thẻ video mới này sẽ cho thấy

sức mạnh của video, giúp cho HTML bớt đi kí tự văn bản và video sẽ được dùng nhiều hơn.

HTML5 tạo ra wiget chat

Widget sử dụng trong iframes cho phép các trang web ghi nhớ lại thông tin từ các trang khác

trong vòng nhiều năm. Tuy nhiên chúng lại bị các rào cản an ninh giới hạn khi chỉ lưu trữ mỗi

wiget trong một sandbox riêng.

HTML5 cung cấp cơ chế chuẩn giúp các widget có thể trò chuyện với nhau. Mặc dù chúng vẫn

khống thể vượt qua được sandbox của widget khác nhưng các widget có thể gửi tin nhắn qua lại,

kết nối công việc, thậm chí là chuyển đổi thông tin về người đang sử dụng máy tính

Các nhà quảng cáo có cơ hội để đăng quản cáo với các ô hình chữ nhật khác nhau xuất hiện trên

các trang web. Trong khi đó, các nhà phát triển vẫn khẳng định sẽ tìm được những ứng dụng

thức tế khác.

Tuy nhiên, sử dụng cơ chế này để gửi tin nhắn thì chỉ mới là bước đầu. Vẫn cần tạo ra tiêu chuẩn

cho những thông tin được chuyển đi do các widget là 1 cơ hội để trò chuyện giữa mọi người nên

chúng cần phải có những ngôn từ chuẩn.

HTML5 có thể tăng khả năng bảo mật

Mỗi trình duyệt có 1 plug-in riêng do các nhóm lập trình khác nhau lập ra với những tiêu chuẩn

khác nhau, được đưa ra vào thời điểm khác nhau và kiểu mẫu bảo mật cung khác nhau. Thông

thường, một số phiên bản plug-in có tính bảo mật hơn so với loại khác. Và khi số lượng plug-in

gia tăng,chúng làm tăng độ phức tạp trong kiểm tra các lỗi an ninh. Liệu plug-in hay trình duyệt

đã có lỗ hổng lớn vào năm ngoái? Liệu có phức tạp không khi chỉ cập nhât trình duyệt mà không

nâng cấp plug-in hoặc ngược lại? Ai có thể nhớ được?


Page 13

Thay thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML 5 sẽ bỏ đi được những

khuyết điểm có trong các plug-in trước đó. Những khuyết điểm có thể bị lợi dụng để thiết lập mã

độc. Nếu như nhóm an ninh kiểm tra Firefox, Chorme hoặc IE cho phép cài đặt các plug-in này,

sự nguy hiểm sẽ giảm bớt đi.

HTML5 đơn giản hóa việc phát triển web

Bill Mill – chuyên viên thiết kế cho Lookingglass Cyber Solutions giải thích ngắn gọn về sự thay

đổi này: ―Tôi thực sự thích HTML5 vì nó cho phép tôi làm việc trong một môi trường thích hợp,

trình duyệt kết hợp với Javascript, DOM mà không phải bật đi bật lại Flash và HTML5. Nó vừa

là 1 ngôn ngữ lại vừa là 1 công cụ , không khác biệt lắm so với các plug-in khác‖.

HTML 5 cung cấp 1 ngôn ngữ lập trình JavaScript, 1 kiểu dữ liêu (XML hoặc DOM) và 1 phần

nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video và Đồ họa. Thách thức trong việc tạo

ra cái gì đó tốt đẹp vẫn là mênh mông nhưng điều đó sẽ đơn giản hơn khi làm việc trong 1 tiêu

chuẩn thống nhất.

Hiện nay chỉ Adobe sử dụng HTML 5 để tích hợp các công cụ dành cho Flash.

IV. HTML5 Tag

Các thẻ mới của html5, thẻ html4, thẻ xhtml

Tag Mô tả Trạng thái

<article> Định nghĩa một bài viết, một nội dung riêng biệt.

<aside> Định nghĩa nội dung bên ngoài nội dung chính (thường là

phần sidebar).

<audio> Định nghĩa âm thanh, như nhạc hay trường audio khác..

<canvas> Được dùng để hiển thị đồ họa.

<command> Định nghĩa một nút lệnh, giống như một Radiobutton, hộp

kiểm, hoặc một button.

<datalist> Định nghĩa một danh sách tùy chọn, sử dụng thành phần

này cùng với các thành phần input.

<details> Xác định thêm chi tiết hoặc điều khiển có thể được ẩn hoặc

hiển thị theo yêu cầu.

<embed> Xác định nội dung nhúng như một plugin.

<figcaption> Xác định một chú thích cho tag figure.

<figure> Xác định các nội dung liên quan mạch lạc với nhau, như

hình ảnh, sơ đồ, code,…

<footer> Định nghĩa khu vực footer (phần cuối) của trang.

<header> Định nghĩa khu vực header (phần đầu) của trang.

<hgroup> Định nghĩa một nhóm các tiêu đề.


Page 14

<keygen> Xác định một cặp trường khóa chính sử dụng cho form.

<mark> Xác định văn bản được đánh dấu, sử dụng khi muốn làm

nổi bật văn bản của mình.

<meter> Định nghĩa một phép đo. Sử dụng chỉ cho phép đo với giá

trị tối thiểu và tối đa.

<nav> Định nghĩa link danh mục (navigation)

<output> Đại diện cho kết quả của phép tính (giống như được thực

hiện bởi script).

<progress> Mô tả tiến trình làm việc.

<rp> Hiển thị những nội dung bên trong khi trình duyệt không

hỗ trợ ruby.

<rt> Định nghĩa một lời giải thích hoặc cách phát âm của các ký

tự (đối với kiểu chữ Đông Á).

<ruby>

Định nghĩa một chú thích ruby (đối với kiểu chữ Đông Á).

Chú thích Ruby được sử dụng trong khu vực Đông Á,

hiển thị cách phát âm của các ký tự Đông Á.

<section> Định nghĩa một khu vực (vùng bao).

<source> Xác định nguồn cho một media.

<summary>

Xác định một tiêu đề cho các thành phần details, được sử

dụng để mô tả chi tiết về tài liệu, hoặc các bộ phận của

tài liệu.

<time> Xác định thời gian, ngày tháng, hoặc năm sinh.

<video> Xác định một video, chẳng hạn như một đoạn phim hoặc

một trường video.

<wbr> Xác định text quá dài sẽ tự động xuống hàng (không tràn

layout)

Những tag tương tự HTML4 / XHTML

Tag Mô tả Trạng thái

<!–…–> Xác định một comment, một chú thích.

<!DOCTYPE> Xác định mẫu cho văn bản HTML.

<a> Xác định một liên kết.

<abbr> Mô tả cụm từ viết tắt.

<address> Xác định thông tin liên hệ (địa chỉ, mail, điện thoại,…).

<area /> Xác định vùng bên trong map của image.

<b> Hiển thị text đậm.

<base /> Xác định một địa chỉ mặc định hay một mục tiêu mặc định


Page 15

cho tất cả link trên trang.

<bdo> Xác định hướng của text (từ trái sang phải hoặc từ phải

sang trái).

<blockquote> Xác định một đoạn trích dẫn dài.

<body> Xác định phần thân của văn bản HTML.

<br /> Ngắt một đoạn text xuống hàng.

<button> Xác định một button.

<caption> Xác định một chú thích cho table.

<cite> Xác định một câu trích dẫn.

<code> Xác định text giống code trong máy tính.

<col /> Xác định giá trị cột trong table.

<colgroup> Xác định một nhóm cột trong table cho cùng định dạng.

<dd> Xác định một mô tả đề mục trong danh sách (xem như

phần nội dung trong danh sách).

<del> Hiển thị đường gạch bỏ text.

<dfn> Xác định một thuật ngữ.

<div> Xác định một bộ phận hoặc một phần trong văn bản.

<dl> Xác định một danh sách (definition list).

<dt> Xác định một đề mục trong danh sách (xem như phần tiêu

đề trong danh sách).

<em> Xác định text nhấn mạnh.

<fieldset> Được dùng để nhóm các thành phần bên trong form một

cách hợp lý.

<form> Xác định một form html cho người dùng nhập

<h1> tới <h6> Xác định tiêu đề html.

<head> Xác định, khai báo thông tin về văn bản HTML.

<hr /> Tạo một đường ngang.

<html> Xác định một văn bản html.

<i> Hiển thị chữ in nghiên.

<iframe> Xác định một khung nội tuyến.

<img /> Hiển thị một image.

<input /> Xác định một điều khiển nhập.

<ins> Xác định việc chèn text.

<isindex> Xác định một chỉ mục tìm kiếm liên quan đến văn bản.


Page 16

<kbd> Hiển thị text kiểu bàn phím.

<label> Tạo một nhãn cho thành phần input.

<legend> Xác định một chú thích cho một phần tử fieldset.

<li> Xác định danh sách item.

<link /> Xác định một liên kết.

<map> Xác định map cho image.

<menu> Xác định danh sách menu.

<meta /> Xác định siêu dữ liệu về một văn bản HTML.

<noscript> Xác định một nội dung thay thế khi trình duyệt không hỗ

trợ hoặc người dụng vô hiệu hóa script.

<object> Xác định một đối tượng nhúng.

<ol> Xác định danh sách có thứ tự.

<optgroup> Xác định một nhóm các tùy chọn liên quan trong một

select.

<option> Xác định một tùy chọn trong một select.

<p> Xác định một đoạn văn.

<param /> Xác định một tham số cho một đối tượng.

<pre> Xác định văn bản định dạng sẵn.

<q> Định nghĩa một đoạn trích dẫn ngắn..

<samp> Hiển thị text kiểu sample trong máy tính.

<script> Xác định một script.

<select> Xác định danh sách lựa chọn.

<small> Hiển thị text nhỏ.

<span> Được sử dụng để nhóm các inline trong văn bản HTML..

<strong> Hiển thị text đậm (mục đích nhấn mạnh).

<style> Xác định thông tin style cho văn bản.

<sub> Hiển thị text lệch bên dưới.

<sup> Hiển thị text lệch bên trên.

<table> Xác định một table.

<tbody> Xác định một nhóm nội dung của table.

<td> Xác định một phần tử nội dung của table.

<textarea> Xác định một vùng điều khiển nhập text.

<tfoot> Một nhóm nội dung cuối của table.


Page 17

<th> Xác định một phần tử tiêu đề của table.

<thead> Một nhóm phần tử tiêu đề của table.

<title> Xác định một tiêu đề của văn bản HTML.

<tr> Xác định một hàng của table.

<ul> Xác định danh sách không thứ tự.

<var> Xác định phần giá trị của text

Những tag không được hỗ trợ trong HTML5

Tag Mô tả Trạng thái Nên thay thế

<acronym> Mô tả từ viết tắt. X <abbr>

<applet> Xác định applet (nhúng JAVA). X <embed>,<object>

<basefont /> Xác định font, màu sắc, hay kích cỡ mặc

định của text trong trang. X font

<big> Hiển thị text lớn. X font-size

<center> Canh giữa text. X text-align

<dir> Xác định danh sách thư mục. X <ul>

<font> Xác định font, màu sắc, và kích cỡ cho

text. X font

<frame> Xác định một frame trong một khung

(frameset). X <iframe>

<frameset> Xác định một khung (frameset). X <iframe>

<noframes>

Xác định một nội dung thay thế khi trình

duyệt không hỗ trợ hoặc người dụng

vô hiệu hóa frame.

X -

<s> Hiển thị gạch ngang text. X text-decoration

<strike> Hiển thị gạch ngang text. X <del>

<tt> Xác định teletype text (kiểu chữ văn bản

máy). X -

<u> Hiển thị gạch dưới text. X text-decoration

V. HTML5 Video

HTML5 Video là một tính năng rất được chú ý ,vậy vì sao nó lại được mọi người quan tâm . sau

đây HTML5VN.NET sẽ chia sẻ với các bạn bài hướng dẫn về HTML5 Video . từ cơ bản đến

nâng cao.

Trước hết phải nói đến html5 video đang là đối thủ cạnh tranh khốc liệt với Flash, html5 video sẽ

đi xa hơn với flash với ưu điểm là tốc độ nhanh hơn,dễ dàng hơn với nhà lập trình, thích hợp với

các smart phone.. và nhiều tính năng nữa.


Page 18

chèn video lên web html5

Cho đến nay, chưa có một tiêu chuẩn nào cho hiển thị một video / phim trên một trang web.

Ngày nay, hầu hết các video được thể hiện thông qua một plug-in (như flash). Tuy nhiên, các

trình duyệt khác nhau có thể có khác nhau plug-in.

HTML5 xác định một yếu tố mới trong đó quy định cụ thể một tiêu chuẩn để nhúng một đoạn

video / phim trên một trang web.

đó là tag <video> của HTML5

- Các trình duyệt hỡ trợ:

+Internet Explorer 9, Firefox, Opera, Chrome, and Safari hỗ trợ tag video

+chú ý: IE 8 và các phiên bản trước khôn ghỡ trợ tag <video>

- Cách hoạt động của HTML5

Các định dạng video được trình duyệt hỗ trợ

Hiện nay, có 3 dạng video được hỡ trợ cho tag <video>là : MP4, WebM, Ogg:

Browser MP4 WebM Ogg

Internet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome 6 YES YES YES

Apple Safari 5 YES NO NO

Opera 10.6 NO YES YES

Cách đưa video vào HTML5 cơ bản

các bạn xem ví dụ trước, sau vid dụ là lời giải thích về code

Cấu Trúc: <video></video>

Ví Dụ:

<h4>Demo HTML5 Video</h4>


Page 19

<video width=‖320″ height=‖240″ controls=‖controls‖>

<source src=‖movie.mp4″ type=‖video/mp4″ />

<source src=‖movie.ogg‖ type=‖video/ogg‖ /></video>

Sơ sơ, để hiểu 1 cách chi tiết, bạn đọc tiếp phần dưới

+ controls=‖controls‖ : để có 1 giao diện bạn cần thiết kế bằng javascrip .. nếu bạn ko biet thiết

kế bạn có thể dùng thuộc tính controls,đây là giao diện có sẵn cho bạn

+ source : để chèn 2 loại file video khác nhau, nếu trình duyệt web bạn không hỗ trợ ―mp4″ thì sẽ

sẽ tự nhảy sang ―ogg‖

+ type : nhìn là hiểu , sẽ học ở bài nâng cao sau

+ width=‖320″ height=‖240″ : 2 cái này là chiều rộng, chiều dài video

HTML5 với thẻ <video> bạn có thể chèn video theo các cách sau đây :

Một file video đơn: Đơn giản là chèn đường dẫn file video vào thuộc tính src, giống như khi

chèn hình ảnh : <img src=‖…..‖ />,

còn đối với video thì ta chỉ cần thay bằng thẻ <video srv=” “/> :

<video src="movie.mp4"> </video>

Thêm yếu tố cố định chiều rộng và chiều cao cho video width và height. Nếu bạn có lỡ đặt chiều

rộng hoặc chiều cao nhỏ hơn so với chiều rộng / cao thực sự của video thì video đó sẽ được tự

động căn giữa thay vì làm giãn video như đối với hình ảnh. Ví dụ :

<video src="movie.mp4" height="240" width="320"></video>

Khi chèn video với HTML5 thì video của bạn bình thường khi hiển thị sẽ không có bảng điều

khiển, để thêm bảng điều khiển cho video thì bạn phải tự thiết kết lấy một cái thôi, bạn có thể

thiết kế giao diện bảng điều khiển thông qua HTML, CSS và Javascript

Còn nếu không muốn (thể) hoặc ngại thiết kế bạn có thể sử dụng giao diện mặc định bằng cách

thêm thuộc tính controls vào trong thẻ <video>.(nói tóm lại: thuộc tính controls cho bạn 1

giao diện sẵn) Ví dụ :

<video src="movie.mp4.ogv" wight="320" height="240" controls></video>

HTML5 với thẻ <video> hiện tại thì nếu bạn muốn người truy cập xem được video trên hầu hết

các trình duyệt thì bạn cần encode video đó ra 2 định dạng có đuôi là .ogg và .mp4, vậy làm sao

để chèn một lúc 2 video khác định dạng vào cùng một thẻ ? với HTML5 thì bạn chỉ cần sử dụng

thuộc tính source để thêm nhiều video trên cùng một thẻ, trình duyệt sẽ tự động chạy các video

theo thứ tự, nếu video không chạy được thì trình duyệt sẽ dừng tải file đó và sang file video tiếp

theo. Ví dụ :

<source src=‖movie.mp4″ type=‖video/mp4″ />

<source src=‖movie.ogg‖ type=‖video/ogg‖ /


Page 20

HTML5 <video> – Làm sao để đưa các chức năng vào ?

nếu chỉ là 1 video cơ bản thì các bạn thấy rất dễ , các bạn có thể xem bài chèn video html5 cơ

bản tại đây.

làm sao để đưa các chức năng như phóng to video,thu nhỏ video,tạm dừng,tải lại,tự động chạy…

- các bạn xem ví dụ trước, và xem hướng dẫn chi tiết về code bên dưới ví dụ-

Cấu Trúc: <video></video>

Ví Dụ:

<div style=‖text-align:center‖><video id=‖video1″ width=‖420″>

<source src=‖mov_bbb.mp4″ type=‖video/mp4″ />

<source src=‖mov_bbb.ogg‖ type=‖video/ogg‖ />

</video>

<br />

<button onclick=‖playPause()‖>Play/Pause</button>

<button onclick=‖makeBig()‖>Big</button>

<button onclick=‖makeSmall()‖>Small</button>

<button onclick=‖makeNormal()‖>Normal</button>

</div>

<script type=‖text/javascript‖>

var myVideo=document.getElementById(―video1″);

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

function makeBig()

{

myVideo.width=560;

}

function makeSmall()

{

myVideo.width=320;

}


Page 21

function makeNormal()

{

myVideo.width=420;

}

</script>

HTML5 <video> – Methods, Properties, and Events

Methods Properties Events

play() currentSrc play

pause() currentTime pause

load() videoWidth progress

canPlayType videoHeight error

duration timeupdate

ended ended

error abort

paused empty

muted emptied

seeking waiting

volume loadedmetadata

height

width

thuộc tính preload và autoplay :

Thuộc tính preload sẽ tự động tải video ngay sau khi truy cập vào trang web chứa video đó, dĩ

nhiên nếu chèn thuộc tính này thì bạn cần chắc là người dùng thực sự muốn xem video đó không

thì sẽ hao tổn lượng băng thông lớn một cách lãng phí. Ví dụ :

<video src="something.ogv" height="240" width="320" preload></video>

Để tắt thuộc tính này bạn thêm giá trị none cho thuộc tính preload. Ví dụ :

<video src="something.ogv" preload="none" height="240" width="320"></video>

Thuộc tính autoplay sẽ tự động chạy video ngay khi truy cập vào trang web chứa video đó, theo

mình cái này nên hạn chế sử dụng, không ai thích việc truy cập vào một đang đọc tin và giật thót

tim vì có cái gì đó đang kêu. Trước kia hay giật mình vì cái ―Mỗi ngày tôi chọn một niềm

vui…….‖ của trang ACB, cứ như là muốn đuổi khách đi quá . Ví dụ cho thuộc tính này :

<video src="something.ogv" height="240" width="320" autoplay></video>


Page 22

HTML5 với thẻ <video> hiện tại thì nếu bạn muốn người truy cập xem được video trên hầu hết

các trình duyệt thì bạn cần encode video đó ra 2 định dạng có đuôi là .ogv và .mp4, vậy làm sao

để chèn một lúc 2 video khác định dạng vào cùng một thẻ ? với HTML5 thì bạn chỉ cần sử dụng

thuộc tính source để thêm nhiều video trên cùng một thẻ, trình duyệt sẽ tự động chạy các video

theo thứ tự, nếu video không chạy được thì trình duyệt sẽ dừng tải file đó và sang file video tiếp

theo. Ví dụ :

<video controls="controls" height="240" width="320"><source src="something.ogv" type="video/ogg; codecs="theora, vorbis" ">

<source src="something.mp" type="video/mp4; codecs="avc1.4201E, mp4a.40.2" ">

</video>

Ở ví dụ trên chúng ta có thêm thuộc tính type, thuộc tính type có 3 giá trị lần lượt chỉ : định

dạng, video codec và audio codec. Ví dụ như với file something.ogv thì thuộc tính type chỉ định

dạng là OGG, video codec là theora và audio codec là vorbis.

HTML5 cùng thẻ <video> trên Internet Explorer

Đợi đã, chẳng phải IE không hỗ trợ HTML5, vậy làm sao mà có thể hiển thị được thẻ <video>

của HTML5 trên IE ?

Trả lời : Vì IE không hỗ trợ HTML5 nên chúng ta cần phải sử dụng một script để hiển thị

HTML5 thông qua nền flash.

Hiện nay có một phần mềm mã nguồn mở là FlowPlayer hỗ trợ việc chạy các file encode H.264

và AAC định dạng MP4, việc của bạn là upload 2 file bao gồm .swf và một file Javascript lên

hosting. Và do FlowPlayer không hiểu thẻ <video> nên chúng ta phải nhét thêm một file

Javascript nữa lên hosting để chuyển trực tiếp thẻ <video> sang thành Flash.

Ở đây chúng ta có 2 file Javascript cần đưa vào site là : flowplayer.min.js của FlowPlayer và

html5-video.js được cung cấp bởi DiveIntoHTML5

Trang chủ FlowPlayer : http://flowplayer.org

Ví dụ :

<script src="flowplayer.min.js">

<script src="html5-video.js">

Tiếp theo bạn cần làm cho IE nhận dạng được thẻ <video> và <source> nếu không thì công của

chúng ta từ bước 1 coi như công cốc, thêm 1 file javascript khác là ―HTML5 Enabling Script‖

lên đầu trang.

Link HTML5 Enabling Script

Ví dụ :




Page 23

Sau khi thêm các file từ bước 1 đến tận bước 2 thì bây giờ khi bạn dùng thẻ <video> IE sẽ tự

động nhận dạng và chuyển sang Flash để sử dụng FlowPlayer cho việc hiển thị / chạy video. Ví

dụ :

<video id="movie" preload="none" controls="controls" height="240" width="320">

<source src="pr6.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">

<source src="pr6.ogv" type="video/ogg; codecs="theora, vorbis""><source src="pr6.ogv" type="video/ogg; codecs="theora, vorbis"">

</video>

Dùng javascript điều khiển video trong html5

Dùng javascript điều khiển video trong html5 là một ý tưởng tuyệt vời và điều tuyệt vời hơn nữa

là các thư viện javascript được phát triển miễn phí. Bạn có thể tải về, chèn vào web của mình.

Bên cạnh đó có kèm theo file css bạn để bạn thoải mái thiết kế cho mình một trình video player

bắt mặt.

Trước tiên bạn chèn file video.js và video.css vào trong thẻ <header>:

<link href="http://html5vn.net/demo/video/video.css" rel="stylesheet"> <script src="http://html5vn.net/demo/video/video.js"></script>

Để chèn video bất kỳ vào nơi trên trang web thì bạn chèn đoạn code dưới đây vào:

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="480" poster="http://vinahd.com/skin/mtv/img/logo.png" data-setup="{}"> <source src="http://www.w3schools.com/html5/movie.mp4" type='video/mp4'> </video>

trong đoạn code trên bạn cần quan tâm đến thẻ <source> chứa url của video, thuộc tính type

định dạng file video ngoài ra html5 còn hỗ trợ định dạng <source src=”my_video.webm”

type=’video/webm’> một định dạng mới trên youtube

. thuộc tính poster cho phép chèn poster vào trước khi video được load.

Để test thử bạn copy đoạn code dưới đây vào notepad, chọn chuẩn utf-8 và lưu thành file html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>html5Vn.net - HTML5 video</title> <link href="http://html5vn.net/demo/video/video.css" rel="stylesheet">


Page 24

<script src="http://html5vn.net/demo/video/video.js"></script> </head> <body> <div class="filename">html5Vn.net | video player </div> <div> <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://vinahd.com/skin/mtv/img/logo.png" data-setup="{}"> <source src="http://www.w3schools.com/html5/movie.mp4" type='video/mp4'> </video> </div> </body> </html>

VI. HTML5 Audio

Thủ thuật chèn audio vào html5, những tính năng mới về audio trong html5 trong chuyên mục

này html5vn.net sẽ hướng dẫn các bạn sử dụng thẻ <audio> trong html5 để chèn file audio vào

web của mình.

Play file mp3 trong html5

Một trong những thay đổi trong HTML5 là cung cấp khả play file audio được tích hợp vào trong

trình duyệt mà không đòi hỏi Adobe Flash hoặc một plugin nào khác. HTML5 cung cấp thể

<audio> hỗ trợ play 3 định dạng phổ biến như mp3, wav, ogg và tùy thuộc vào trình duyệt:


Page 25

Browser MP3 Wav Ogg

Internet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome 6 YES YES YES

Apple Safari 5 YES YES NO

Opera 10.6 NO YES YES

Dưới đây một đoạn code đơn giản để play mp3 dùng thẻ <audio>

Cấu Trúc: <audio src="file-nhac.mp3" autoplay controls></audio>

Trong đó:

Attribute Value Description

autoplay autoplay cho phép tự động play khi file audio đã sẵn sàng.

controls controls hiện thanh điều khiển.

loop loop lặp lại file audio tương tự repeat .

preload

auto

metadata

none

tự động play khi load trang web

src URL đường dẫn file audio

Play audio trong html5 dùng javascript

Ở phần trên đã giới thiệu đến các bạn cách play audio trong html5, bài viết này sẽ hướng dẫn

dung javascript và jquery điều khiển đối tượng audio.

Cách thêm <audio> file mp3 dùng javascript:

var audioElement = document.createElement('audio');

audioElement.setAttribute('src',

'http://www.aolcdn.com/_media/ch_music/hot_chip_made_in_the_dark.mp3');

audioElement.play();

Để lấy url của file audio hoặc lấy duration và thời gian hiện tại của file đang play thì dùng các

lệnh sau:

audioElement.src;

audioElement.duration;

audioElement.currentTime;


Page 26

Với hàm audioElement.duration và audioElement.currentTimethời gian trả về ở đơn vị là

giây.Ngoài ra để play file audio ở một vị trí bất kỳ thì gán giá trị cho audioElement như

sau: audioElement.currentTime = time (time ở đơn vị giây)

Để tạm dừng file đang play:

audioElement.pause();

trong html5 thì không có điều khiển stop mà, để stop file bạn cần phải pause file trước và gán

cho đối tương audio một đường dẫn mới.

try {

if(audioElement != undefined){

audioElement.pause();

}

audioElement = new Audio(―filename‖);

audioElement.play();

} catch(v) { //alert(v.message);

}

Điều chỉnh volume cho file audio: audioElement.volume=0;

giá trị volume nằm trong khoảng 0 đến 100. 0 đồng nghĩa với mute.

VII. HTML5 Drag and Drop

HTML5 Drag and Drop là gì? đó là khả năng kéo và thả một đối tượng., nó là một trong những

tính năng mới khá hay của HTML5

Các trình duyệt hỗ trợ tính năng này.

Internet Explorer 9, Firefox, Chrome, and Safari 5.

chú ý: Drop &Drap không làm việc với Safari 5.1.2. và Opera

các bạn xem ví dụ sau đây để dễ tưởng tượng

Code javascript cho style css, chèn trong thẻ head:


Page 27

<style type=‖text/css‖>#div1 {width:350px;height:70px;padding:10px;border:1px solid

#aaaaaa;}

</style>

<script type=‖text/javascript‖>function allowDrop(ev)

{

ev.preventDefault();

}function drag(ev)

{

ev.dataTransfer.setData(―Text‖,ev.target.id);

}function drop(ev)

{

var data=ev.dataTransfer.getData(―Text‖);

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}

</script>

Code viết HTML:

<div id=‖div1″ ondrop=‖drop(event)‖ ondragover=‖allowDrop(event)‖></div>

<br />

<img id=‖drag1″ src=‖html5-drop.png‖ draggable=‖true‖ ondragstart=‖drag(event)‖

width=‖336″ height=‖69″ />

Giải thích code

- Thuộc tính draggable=”true” sẽ cho phép đối tượng có khả năng được kéo và thả.

- Khi sự kiện Drag xảy ra, chúng ta gọi hàm drag(event) và hàm setData() để thiết lập giá trị khi

Drag.

- Trong khi chúng ta đang Drag thì mặc định chúng ta không thể thả xuống một đối tượng khác

trong WEB vì thế ta phải gọi hàm event.preventDefault().

- Khi Drop đối tượng ta gọi hàm drop(event) để thực hiện sự kiện.

VIII. HTML5 Canvas

1. HTML5 Canvas – Cấu trúc và tọa độ

canvas là một phần tử mới xuất hiện trong HTML5 và rất hữu ích trong việc vẽ đồ họa trên nền

web. Nó lần đầu được giới thiệu bởi Apple, sau đó được ứng dụng nhiều vào trong trình duyệt

Safari và bây giờ các trình duyệt phổ biến cũng đã hỗ trợ

Tại sao chúng ta cần Canvas

Bởi vì Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt như:

Các sơ đồ đơn giản

Trang trí thêm cho giao diện người dùng


Page 28

Hình ảnh động

Biểu đồ và đồ thị

Có thể nhúng các ứng dụng vẽ

Hoạt động tốt với những hạn chế của CSS

Cần gì để tìm hiểu <canvas>

Sử dụng <canvas> không khó, bạn chỉ cần có kiến thức về HTML và JavaScript.

và sau đây HTML5VN.NET sẽ giới thiệu các bạn về cấu trúc cơ bản của <canvas>

<canvas id="myCanvas"></canvas>

<!DOCTYPE HTML> <html> <head> <script> window.onload = function()

{ // Lấy ra vị trí canvas với bối cảnh 2D var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // do stuff here

}; </script> </head> <body> // độ lớn canvas giống html <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>

Để đặt bất cứ thứ gì trên canvas (khung nền ảnh), trước tiên bạn phải định nghĩa canvas trong tệp

HTML. Bạn phải tạo mã JavaScript để truy cập thẻ <canvas> và giao tiếp với Canvas API của

HTML5 để vẽ hình ảnh của bạn.

Cấu tạo chính của thẻ <canvas> là:

<canvas id="myCanvas" width="200" height="200"></canvas>

Một phần tử canvas có hai thuộc tính riêng của nó: width (chiều rộng) và height (chiều cao).

Ngoài ra, phần tử canvas còn sở hữu tất cả các thuộc tính HTML5 quan trọng, chẳng hạn

như class (lớp), id (mã định danh), và name (tên). Thuộc tính id thường dùng trong các mã

được hiển thị ở trên. JavaScript sử dụng id của phần tử canvas được tạo ở đây để xác định phần

tử canvas để vẽ lên. JavaScript xác định phần tử canvas thích hợp bằng cách sử dụng phương

thức document.getElementById(), như được hiển thị dưới đây: var canvas = document.getElementById("myCanvas");


Page 29

Mỗi phần tử canvas phải có một định nghĩa ngữ cảnh, như hình dưới đây. Hiện nay, đặc tả chính

thức chỉ công nhận môi trường 2D: var context = canvas.getContext("2d");

Sau khi bạn xác định phần tử canvas và xác định rõ ngữ cảnh của nó, bạn đã sẵn sàng bắt đầu vẽ.

Các tọa độ canvas

Một điều kiện tiên quyết để vẽ trên canvas (khung nền ảnh) là phải biết rõ về vùng lưới hoặc

vùng tọa độ. Các phép đo vùng khung nền này theo chiều rộng và chiều cao được tính bằng pixel

(điểm ảnh). Canvas được dựng lên xung quanh việc sử dụng các tọa độ x và y. Các tọa độ của

canvas tại x=0, y=0 nằm ở góc trên bên trái.

Các thuộc tính mặc định cho vùng hình chữ nhật của canvas có chiều rộng là 300 pixels và chiều

cao là 150 pixels, nhưng bạn có thể xác định kích thước chính xác của phần tử canvas này bằng

cách quy định chiều rộng và chiều cao. Bản vẽ trong Hình 1 cho thấy cách triển khai thực hiện

tọa độ x và y.

Hình 1. Các tọa độ canvas


Page 30

Hình 1 cho thấy một vùng canvas 100 pixel x 100 pixel:

Các góc trên bên trái có x=0, y=0.

Giá trị x tăng theo chiều ngang, và giá trị y tăng theo chiều dọc.

Góc dưới cùng bên phải có x=100, y=100.

Tâm điểm có x=50, y=50.

2. HTML5 Canvas Line

Để tạo ra một đường thẳng trong HTML5 Canvas, chúng ta có thể sử dụng

moveTo (), lineTo (), và stroke () context.moveTo(x,y); context.lineTo(x,y); context.stroke();

Sau đây là ví dụ vẽ đường thẳng: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> <script> window.onload = function() { var canvas = document.getElementById("myCanvas");


Page 31

var context = canvas.getContext("2d"); // html5vn.net bắt đầu vẽ đường thẳng nè context.moveTo(100, 150); context.lineTo(450, 50); context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>

Kết quả:

moveTo() – Tạo ra điển nhất định ,điểm bắt đầu

lineTo() – vẽ theo vị trí mà con trỏ chuột (moveTo) đã định trước tới điểm kết thúc

stroke() - Chỉ định 1 màu sắc cho nét vẽ (lineTo) mặc định là màu đen, bạn có thể thay đổi màu

tùy chỉnh

để xem cách tính tọa độ các bạn nên xem lại phần cấu trúc và tọa độ của Canvas ở trên


Page 32

Canvas Line Width

Để quy định độ dày rộng của đường line , chúng ta cần sử dụng phương thức sau:

context.lineWidth = [value];

ví dụ vẽ đường thẳng sau:

<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> // bắt đầu nè <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

context.moveTo(100, 150); context.lineTo(450, 50); context.lineWidth = 15; // độ rộng của đường thẳng là 15px context.stroke(); };

</script>


Page 33

// hết rùi nhe </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>

Canvas Line Color

Để quy định màu của đường line, chúng ta dùng phương thức :

context.strokeStyle=[value];

ví dụ vẽ đường thẳng có màu:

<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> <script> //html5vn.net bắt đầu ne window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

context.moveTo(100, 150); context.lineTo(450, 50); context.lineWidth = 10; // thiết lập màu cho đường thẳng context.strokeStyle = "#ff0000"; context.stroke(); };


Page 34

</script> // hoàn thành rùi đó </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>

3 bài trước đã hướng dẫn rất chi tiết và bây giờ các bạn hãy cùng xem :

Ví dụ HTML5 Canvas Line Cap :

<!DOCTYPE HTML> <html> <head> <title>Line Example</title> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> // html5vn.net bắt đầu vẽ,tô <script>

window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

// đường line với lineCap bo tròn (round) với màu xanh dương context.beginPath(); context.moveTo(50, 50); context.lineTo(300,50); context.lineWidth = 10; context.strokeStyle = "#0000FF"; context.lineCap = "round"; context.stroke();


Page 35

// đường line với lineCap góc vuông (square) với màu xanh lá context.beginPath(); context.moveTo(50, 100); context.lineTo(300,100); context.lineWidth = 20; context.strokeStyle = "#00FF00"; context.lineCap = "square"; context.stroke();

// đường line với lineCap mặc định là butt với màu hồng context.beginPath(); context.moveTo(50, 150); context.lineTo(300, 150); context.lineWidth = 30; context.strokeStyle = "#FF00FF"; context.lineCap = "butt"; context.stroke(); }; </script> //end </head> <body> <canvas id="myCanvas" width="400" height="200"> </canvas>

</body> </html>

3. HTML5 Canvas Curves

HTML5 Canvas Curves – Arc

Để tạo một vòng cung với html5 Canvas, chúng ta có thể sử dụng phương pháp arc(). Vòng cung

được xác định bởi một điểm trung tâm, bán kính, góc bắt đầu, một góc kết thúc, và đường chiều

bản vẽ (hoặc theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ). context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);


Page 36

các bạn sem ví dụ tại html5vn.net (từ bài này mình chỉ đưa code trong thẻ <script> cho

gọn,các bạn về tự ráp vào khuôn) window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 75; var startingAngle = 1.1 * Math.PI;// vị trí bắt đầu var endingAngle = 1.9 * Math.PI; // vị trí kết thúc var counterclockwise = false; context.arc(centerX, centerY, radius, startingAngle, endingAngle,

counterclockwise); context.lineWidth = 15; context.strokeStyle = "black"; // line color context.stroke(); };

Hãy nhìn vào sơ đồ ở trên. Một cung là một phần của chu vi của một vòng tròn tưởng tượng. Đây

là vòng tròn tưởng tượng có thể được định nghĩa bởi centerX, centerY, và bán kính.


Page 37

Tiếp theo, chúng ta có thể xác định vòng cung với hai điểm dọc theo chu vi của vòng tròn tưởng

tượng được định nghĩa bởi startingAngle và endingAngle. Hai góc độ này được quy định tại

radian và hình thành đường thẳng tưởng tượng có nguồn gốc từ tâm của vòng tròn và giao với

phần đầu của vòng cung mà ta muốn tạo ra.

Đối số cuối cùng của phương pháp hồ quang ngược chiều kim đồng hồ đó là một tham số tùy

chọn xác định hướng của con đường vòng cung giữa hai điểm kết thúc. Trừ khi có quy định

khác, lập luận này là mặc định sai, nếu bạn để là true thì hình vẽ sẽ là phần ngược lại của vòng

cung chưa vẽ (phần chưa vẽ trên vòng tròn tưởng tượng sẽ được vẽ nếu set là true).

HTML5 Canvas – Quadratic Curve

Để tạo ra một đường cong bậc hai với html5 Canvas, chúng ta có thể sử dụng phương pháp

quadraticCurveTo(). Đường cong bậc hai được xác định bởi điểm bắt đầu, một điểm kiểm soát

(điểm này chính là điểm ở giữa để tạo đường cong), và một điểm kết thúc. context.quadraticCurveTo(controlX, controlY, endX, endY);

bài này nhìn ví dụ là hiểu window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var controlX = 288; var controlY = 0; var endX = 388; var endY = 150;

context.moveTo(188, 150); context.quadraticCurveTo(controlX, controlY, endX, endY); context.lineWidth = 10; context.strokeStyle = "black"; // màu của đường vẽ context.stroke(); };


Page 38

Hãy nhìn vào sơ đồ ở trên. Một điểm kiểm soát xác định độ cong của đường cong bậc hai của

bạn bằng cách tạo ra hai đường tiếp tuyến tưởng tượng được kết nối với các điểm bối cảnh và

điểm kết thúc. Điểm ngữ cảnh(điểm bắt đầu) được xác định theo phương pháp moveTo(). Di

chuyển các điểm kiểm soát xa từ quan điểm ngữ cảnh và điểm kết thúc sẽ tạo ra đường cong sắc

nét hơn, và di chuyển các điểm kiểm soát gần gũi hơn với ngữ cảnh và điểm kết thúc sẽ tạo ra

đường cong rộng lớn hơn.

Vẽ đường Bizier Curve

Để tạo ra một đường cong Bezier với html5 Canvas, chúng ta có thể sử dụng phương pháp

bezierCurveTo(). Các đường cong Bezier được định nghĩa với điểm bối cảnh đó, hai điểm kiểm

soát, và một điểm kết thúc. Không giống như các đường cong bậc hai, đường cong Bezier được

định nghĩa với hai điểm kiểm soát thay vì một, cho phép bạn tạo độ cong phức tạp hơn.

context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX,

endY);

xem ví dụ

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var controlX1 = 140; var controlY1 = 10; var controlX2 = 388; var controlY2 = 10; var endX = 388; var endY = 170; context.moveTo(188, 130); context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); context.lineWidth = 10; context.strokeStyle = "black"; // màu của đường vẽ context.stroke(); };


Page 39

Hãy nhìn vào sơ đồ ở trên. Một đường cong bezier được xác định bởi điểm bối cảnh, hai điểm

kiểm soát, và một điểm kết thúc. Phần đầu tiên của đường cong tiếp tuyến với đường tưởng

tượng được xác định bởi điểm bối cảnh và kiểm soát các điểm đầu tiên. Phần thứ hai của đường

cong tiếp tuyến với đường tưởng tượng được xác định bởi các điểm kiểm soát thứ hai và điểm

kết thúc.

4. HTML5 Canvas Paths

Vẽ đường Canvas Path

Để tạo ra một con đường với html5 Canvas, chúng ta có thể kết nối nhiều đường line. Điểm kết

thúc của mỗi đường line liên tiếp trở thành điểm bối cảnh mới. Chúng ta có thể sử dụng lineTo(),

arcTo(), quadraticCurveTo (), và bezierCurveTo() phương pháp để xây dựng mỗi đường line để

vẽ nối tiếp và tạo thành 1 đường cong tùy ý. Chúng ta có thể sử dụng phương thức beginPath()

mỗi lần chúng tôi muốn bắt đầu vẽ một con đường mới. Nếu không sử dụng phương thức này thì

những gì đã vẽ trước đó sẽ vẽ nối tiếp với đường mới chung sẽ vẽ.

context.beginPath();


ví dụ


Page 40

window.onload = function(){ var canvas = document.getElementById("vfa_canvas"); var context = canvas.getContext("2d");

context.beginPath(); context.moveTo(100, 20); context.lineTo(200, 160); // line 1 context.quadraticCurveTo(230, 200, 250, 120); // đường quadratic context.bezierCurveTo(290, -40, 300, 200, 400, 150); // đường bezier context.lineTo(500, 90); // line 2 context.lineWidth = 5; context.strokeStyle = "#0000ff"; context.stroke(); };

Hình vẽ trên cho thấy có 4 đường vẽ nối liên tiếp nhau để tạo thành đường cong tùy ý chúng ta.

Vẽ đường nối bằng HTML5 Canvas Line Join

Để thiết lập đường nối của một con đường line Canvas html5, chúng ta có thể sử dụng lineJoin.

Đường dẫn có thể có một trong ba dòng tham gia: miter(mũ), round()(vòng) và bevel(côn). Mặc

định là miter.

context.lineJoin=[value];

xem ví dụ


Page 41


// góc bo nhọn (hình bên trái) context.beginPath(); context.moveTo(canvas.width / 2 - 50 - 140, canvas.height - 50); // line 1 context.lineTo(canvas.width / 2 - 140, 50); // line 1 context.lineTo(canvas.width / 2 + 50 - 140, canvas.height - 50); // line 1 context.lineWidth = 25; context.lineJoin = "miter"; context.stroke(); // góc bo tròn (hình ở giữa) context.beginPath(); context.moveTo(canvas.width / 2 - 50, canvas.height - 50); // line 1 context.lineTo(canvas.width / 2, 50); // line 1 context.lineTo(canvas.width / 2 + 50, canvas.height - 50); // line 1 context.lineWidth = 25; context.lineJoin = "round()"; context.stroke(); // góc bo gấp khúc (hình bên phải) context.beginPath(); context.moveTo(canvas.width / 2 - 50 + 140, canvas.height - 50); // line 1 context.lineTo(canvas.width / 2 + 140, 50); // line 1 context.lineTo(canvas.width / 2 + 50 + 140, canvas.height - 50); // line 1 context.lineWidth = 25; context.lineJoin = "bevel"; context.stroke(); };

Vẽ đường thẳng với góc bo tròn bằng HTML5 Canvas Rounded Corners

Để tạo ra các góc được làm tròn bằng cách sử dụng html5 Canvas, chúng ta có thể sử dụng

arcTo() phương pháp được xác định bởi một điểm kiểm soát, một điểm kết thúc, và bán kính.

context.arcTo(controlX,controlY,endX,endY,radius);

Ví dụ:

window.onload = function(){


Page 42

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 200; var rectHeight = 100; var rectX = canvas.width / 2 - rectWidth / 2; var rectY = canvas.height / 2 - rectHeight / 2; var cornerRadius = 50; context.beginPath(); context.moveTo(rectX, rectY); context.lineTo(rectX + rectWidth - cornerRadius, rectY); context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius); context.lineTo(rectX + rectWidth, rectY + rectHeight);

context.lineWidth = 5; context.stroke(); };

5. HTML5 Canvas Shapes

Vẽ hình Shap tùy chỉnh bằng thẻ Canvas trong html5

Để tạo ra một hình dạng tùy chỉnh với html5 Canvas, chúng ta có thể tạo ra nhiều đường line và

sau đó đóng nó bằng cách sử dụng phương pháp closePath (). Chúng ta có thể sử dụng lineTo(),

arcTo(), quadraticCurveTo(), hoặc bezierCurveTo() phương pháp để xây dựng các đường line

tạo thành hình dạng của của hình vẽ chúng ta mong muốn.

context.closePath();

ví dụ


context.beginPath(); // bắt đầu đường vẽ


Page 43

context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); // kết thúc đường vẽ context.lineWidth = 5; context.strokeStyle = "#0000ff"; context.stroke(); };

Nếu chúng ta muốn tô màu cho phần bên trong thì dùng phương thức fillStyle để đặt giá trị màu

tô và dùng phương thức fill() để tô , tô màu trước khi dùng phương thức stroke()

context.fillStyle = "#8ED6FF"; context.fill();

Vẽ hình hình chữ nhật tùy chỉnh bằng thẻ Canvas

Để tạo ra một hình chữ nhật bằng cách sử dụng html5 Canvas, chúng ta có thể sử dụng phương

pháp rect(). Một hình chữ nhật html5 Canvas có vị trí nằm ở điểm có tọa độ topLeftCornerX và

topLeftCornerY, và có kích thước với các thông số chiều rộng và chiều cao.

context.rect(topLeftCornerX,topLeftCornerY,width,height);


Page 44

ví dụ vẽ hình chữ nhật

<!DOCTYPE HTML> <html> <head> <style> #myCanvas { border: 1px solid #9C9898; } body { margin: 0px; padding: 0px; } </style> <script> window.onload = function() { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');

context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = '#8ED6FF'; // to màu bên trong hình chữ nhật context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; // màu đường thẳng context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>

Vẽ hình tròn tùy chỉnh bằng thẻ Canvas

Để vẽ một vòng tròn với html5 Canvas, chúng sử dụng phương thức arc() và xác định góc bắt

đầu từ 0 và góc kết thúc như 2 * PI.

context.arc(centerX,centerY,radius,0,2*Math.PI,false);

ví dụ đường tròn


Page 45

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = "#8ED6FF"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); };

Để vẽ một nửa vòng tròn thì chúng ta thay góc kết thúc là 1PI và sau đó đóng lại đường vẽ

bằng phương thức closePath()

context.arc(centerX,centerY,radius,startingAngle, startingAngle + Math.PI,antiClockwise);

Hình bên dưới mô tả sự khác biệt khi dùng và không dùng phương thức closePath()

Cắt một vùng chọn với phương thức clip

Để cắt một vùng được sử dụng trong HTML5 Canvas, chúng ta có thể vẽ vùng đó và dùng

phương thức clip(). Hay nói cách khác, dùng phương thức clip để xóa đi những vùng bên ngoài

nó.

context.clip();

xem ví dụ

window.onload = function(){ var canvas = document.getElementById("myCanvas");


Page 46

var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 75; var offset = 50;

// Xác định khu vực cắt vòng tròn // save() cho phép lưu trước khi canvas vùng cắt // xác định khu vực cắt để có thể quay lại // Trạng thái mặc định sau này context.save(); context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.clip();

// Vẽ vòng tròn màu xanh bên trong khu vực cắt context.beginPath(); context.arc(centerX - offset, centerY - offset, radius, 0, 2 * Math.PI,

false); context.fillStyle = "#00D2FF"; // light blue context.fill(); // Vẽ vòng tròn màu vàng bên trong khu vực cắt context.beginPath(); context.arc(centerX + offset, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = "yellow"; context.fill(); // Vẽ vòng tròn màu đỏ bên trong khu vực cắt context.beginPath(); context.arc(centerX, centerY + offset, radius, 0, 2 * Math.PI, false); context.fillStyle = "red"; context.fill(); // restore() khôi phục hiện trạng trước khi xác định khu vực cắt

context.restore(); context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.lineWidth = 3; context.strokeColor = "black"; context.stroke(); };


Page 47

6. HTML5 Canvas Fill Styles

Tô màu chuyển sắc cho thẻ Canvas Linear Gradient và Radial Gradient trong html5

Linear Gradient

Để tạo ra một gradient tuyến tính với html5 Canvas, chúng ta có thể sử dụng phương pháp

createLinearGradient(). Gradient tuyến tính được xác định bởi một đường thẳng tưởng tượng

trong đó xác định hướng của gradient. Một khi chúng ta đã tạo ra độ dốc của nó , chúng ta có thể

chèn các màu sắc bằng cách sử dụng phương thức addColorStop().

var grd=context.createLinearGradient(startX, startY, endX, endY); grd.addColorStop(offset, color);

ví dụ

window.onload = function(){ var canvas = document.getElementById("vfa_canvas"); var context = canvas.getContext("2d"); context.beginPath(); // html5vn.net bắt đầu vẽ hình nè context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); //kết thúc hình vẽ // tao mau chuyen sac var grd = context.createLinearGradient(230, 0, 370, 200); grd.addColorStop(0, "#8ED6FF"); // màu xanh nhạt grd.addColorStop(1, "#004CB3"); // màu xanh sẫm context.fillStyle = grd; context.fill(); context.lineWidth = 5; context.strokeStyle = "#0000ff"; context.stroke(); };

Radial Gradient


Page 48

Từ ví dụ trên ta có thể dùng n vòng tròn thay vì 2 vòng tròn để tạo ra nhiều màu sắc như

hình vẽ bên dưới

Cấu trúc có thay đổi 1 xíu "context.createRadialGradient"

var grd=context.createRadialGradient(startX, startY, startRadius,

endX, endY, endRadius);

grd.addColorStop(offset, color);

Thêm các màu này vào rồi các bạn sẻ thấy kết quả như hình trên

grd.addColorStop(0, "red");

grd.addColorStop(0.17, "orange");

grd.addColorStop(0.33, "yellow");

grd.addColorStop(0.5, "green");

grd.addColorStop(0.666, "blue");

grd.addColorStop(1, "violet");

Sau khi thêm ta được code như sau, các bạn so sánh với code trên:

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");


context.moveTo(170, 80);

context.bezierCurveTo(130, 100, 130, 150, 230, 150);






context.closePath();

// tạo nhiều màu chuyển sắc

var grd = context.createRadialGradient(238, 50, 10, 338, 50, 200);

grd.addColorStop(0, "red");

grd.addColorStop(0.17, "orange");

grd.addColorStop(0.33, "yellow");

grd.addColorStop(0.5, "green");

grd.addColorStop(0.666, "blue");

grd.addColorStop(1, "violet");

context.fillStyle = grd;

context.fill();

// add stroke

context.lineWidth = 5;

context.strokeStyle = "#0000ff";

context.stroke();

};


Page 49

Tọa mẫu nền cho hình ảnh bằng canvas pattern trong html5

Để tạo một nền từ một mẫu hình , chúng ta có thể dùng phương thức createPattern() và chúng ta

có thể lặp mẫu theo trục x hay trục y, cả 2 trục hoặc không lặp lại : repeat, repeat-x, repeat-y, no-

repeat và mặc định sẽ là repeat.

var pattern = context.createPattern(imageObj, repeatOption);

context.fillStyle = pattern;

context.fill();

var pattern = context.createPattern(imageObj, repeatOption); context.fillStyle = pattern; context.fill();

ví dụ

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

var imageObj = new Image(); imageObj.onload = function(){ var pattern = context.createPattern(imageObj, "repeat"); context.rect(10, 10, canvas.width - 20, canvas.height - 20); context.fillStyle = pattern; context.fill(); }; imageObj.src = "link ảnh.png"; };

Kết quả so sánh giữa ảnh gốc và ảnh sau khi được Pattern


Page 50

7. HTML5 Canvas images

Để vẽ một hình ảnh bằng cách sử dụng html5 Canvas, chúng ta có thể sử dụng phương thức

drawImage() , yêu cầu phải có một đối tượng hình ảnh và một điểm đích. Các điểm đích là tương

đối so với góc trên bên trái của hình ảnh.

context.drawImage(imageObj,destX,destY);

Ví Dụ:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var destX = 69; var destY = 50; var imageObj = new Image();

imageObj.onload = function(){ context.drawImage(imageObj, destX, destY); };


Page 51

imageObj.src = "darth-vader.jpg"; };

HTML5 Canvas image size – lấy kích thươc cho ảnh

Cấu trúc để lấy kích thước ảnh như sau:

context.drawImage(imageObj,destX,destY,destWidth,destHeight);

ví dụ:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var destX = 188; var destY = 130; var destWidth = 200; var destHeight = 137; var imageObj = new Image(); imageObj.onload = function(){ context.drawImage(imageObj, destX, destY, destWidth, destHeight); }; imageObj.src = "darth-vader.jpg"; };


Page 52

HTML5 Canvas image Crop – cắt ảnh

Crop Image : khi có 1 hình ảnh mà chúng ta chỉ muốn lấy 1 phần hình ảnh đó trong ảnh gốc ban

đầu chúng ra có thể dùng thêm 1 số thuộc tính trong phương thức drawImage. Tuy nhiên nếu

hình ảnh quá nhỏ mà chúng ta lấy 1 phần hình ảnh ra rồi quy định kích thước cho phần ảnh lấy ra

thì có thể sẽ gặp lỗi do html5 không thể zoom phần ảnh đó so với ảnh gốc.

Cấu trúc:

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight,

destX, destY, destWidth, destHeight);


Page 53

Bạn có thể thay đổi các ảnh bằng cách cắt các vùng đã chọn bên ngoài chúng. Cắt trên canvas là

một hàm chất tải lên phương thức drawImage(). Phương thức drawImage() có ba tùy chọn. Bạn

có thể sử dụng hoặc ba, năm, hoặc chín đối số.

Cấu hình ba-đối số — drawImage(image, dx, dy)— vẽ ảnh này trên canvas ở tọa độ

đích (dx, dy). Các tọa độ này thiết lập góc trên bên trái của hình ảnh.

Cấu hình năm-đối số — drawImage(image, dx, dy, dw, dh)—đưa ra chiều rộng và chiều

cao của ảnh đích. Hình ảnh này được điều chỉnh để phù hợp với chiều rộng và chiều cao của đích

này.

Cấu hình chín-đối số — drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)— lấy một

hình ảnh, cắt rời ra một vùng hình chữ nhật bắt đầu ở các tọa độ nguồn (sx,sy) với chiều rộng

và chiều cao (sw,sh), và điều chỉnh nó cho phù hợp với chiều rộng và chiều cao (dw,dh) của

đích này, đặt nó trên canvas tại (dx,dy).


Page 54

Hình 7 cho thấy hình ảnh mà bạn sẽ cắt ra.

Hình 7. Cắt một ảnh

Khi sử dụng ảnh được hiển thị trong Hình 7, một tập các ảnh được đặt trên canvas (khung nền

ảnh) này. Một ảnh là một canvas đã định kích thước và được sử dụng làm khung nền. Một ảnh

khác được tạo ra nhỏ hơn và chèn vào phía dưới bên phải của khung nền đó. Một ảnh thứ ba là

ảnh cắt ra phần đầu của Napoleon mà bạn đặt ở góc trên bên trái của khung nền này. Ảnh đã cắt

xong được hiển thị trong Hình 8.

Hình 8. Ảnh đã cắt xong

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var imageObj = new Image();

imageObj.onload = function(){ // draw cropped image var sourceX = 150; var sourceY = 0; var sourceWidth = 150; var sourceHeight = 150;


Page 55

var destWidth = sourceWidth; var destHeight = sourceHeight; var destX = canvas.width / 2 - destWidth / 2; var destY = canvas.height / 2 - destHeight / 2; context.drawImage(imageObj, sourceX, sourceY, sourceWidth,

sourceHeight, destX, destY, destWidth, destHeight); }; imageObj.src = "darth-vader.jpg"; };

HTML Canvas image Loader

Khi một ứng dụng HTML5 Canvas yêu cầu nhiều ảnh lên một lúc,để đơn giản hóa,tăng tốc độ

quá trình tải ảnh ,sao tốt cho người dùng,chúng ta hãy cùng xem ví dụ sau

function loadImages(sources, callback){ var images = {}; var loadedImages = 0; var numImages = 0; // get num of sources for (var src in sources) { numImages++; } for (var src in sources) { images[src] = new Image(); images[src].onload = function(){ if (++loadedImages >= numImages) { callback(images); } }; images[src].src = sources[src]; } }

window.onload = function(images){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var sources = { darthVader: "darth-vader.jpg", yoda: "yoda.jpg" };

loadImages(sources, function(images){ context.drawImage(images.darthVader, 100, 30, 200, 137); context.drawImage(images.yoda, 350, 55, 93, 104); }); };


Page 56

HTML5 Canvas Text

8. HTML5 Canvas Text Font & Size

context.font=[value];

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = 150; var y = 100; context.font = "40pt Calibri"; context.fillText("Hello World!", x, y); };

HTML5 Canvas Text Color

context.fillStyle=[value];

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = 150; var y = 100; context.font = "40pt Calibri";


Page 57

context.fillStyle = "#0000ff"; // text color context.fillText("Hello World!", x, y); };

Canvas Text Stroke

context.strokeStyle=[value]; context.strokeText("Hello World!", x, y);

Ví dụ:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = 80; var y = 110;

context.font = "60pt Calibri"; context.lineWidth = 3; context.strokeStyle = "blue"; // stroke color context.strokeText("Hello World!", x, y); };

HTML5 Canvas Text Align

context.textAlign=[value];

Ví dụ:


Page 58

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height / 2;

context.font = "30pt Calibri"; context.textAlign = "center"; context.fillStyle = "blue"; context.fillText("Hello World!", x, y); };

9. HTML5 CanVas nâng cao

Tạo bóng đổ trong HTML5 Canvas

Để tạo đổ bóng trên các đối tượng hình vẽ, ta dùng 2 thuộc tính sau :

context.shadowOffsetX=[value]; context.shadowOffsetY=[value];

Ví dụ:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

context.rect(188, 40, 200, 100); context.fillStyle = "#8ED6FF"; context.shadowColor = "#bbbbbb"; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fill(); };


Page 59

Xử lý 2 đối tượng chồng nhau trong HTML5 Canvas

Trường hợp này khi bạn vẽ 2 hoặc nhiều đối tượng chồng lên nhau thì dùng phương thức này để

có thể nhìn thấy được các đối tượng bên dưới.

context.globalAlpha=[value];

Ví Dụ

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.rect(200, 20, 100, 100); context.fillStyle = "blue"; context.fill(); context.globalAlpha = 0.5; // gán độ trong suốt cho đối tượng context.beginPath(); context.arc(320, 120, 60, 0, 2 * Math.PI, false); context.fillStyle = "red"; context.fill(); };


Page 60

Dịch chuyển một đối tượng trong HTML5 Canvas

Để dịch chuyển 1 đối tượng trên khung vẽ canvas chúng ta dùng phương thức sau

context.translate(xOffset, yOffset);

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; // dịch chuyển đối tượng vào trung tâm khung vẽ context.translate(canvas.width / 2, canvas.height / 2);

context.fillStyle = "blue"; context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); };

Hoặc bạn đã từng hiểu về các phương pháp dịch chuyển tọa độ trong môn đồ họa thì chúng ta sử

dụng ma trận hệ tọa độ sau để dịch chuyển. Code như sau:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; // ma trận chuyển đổi tượng vào tâm khung vẽ: // 1 0 tx // 0 1 ty // 0 0 1 var tx = canvas.width / 2; var ty = canvas.height / 2;

// tiến hành chuyển vị trí đối tượng trên khung vẽ context.transform(1, 0, 0, 1, tx, ty);


Để co giãn kích thước của đối tượng trên khung vẽ canvas ta dùng phương thức scale

context.scale(scaleX,scaleY);

Ví dụ:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; context.translate(canvas.width / 2, canvas.height / 2); // gán giá trị cho độ thu hẹp context.scale(1, 0.5);


Page 61


Xoay chuyển một đối tượng trong HTML5 Canvas

Để xoay 1 đối tượng trong khung vẽ canvas chúng ta dùng phương pháp rotate để xoay theo

chiều kim đồng hồ hoặc ngược lại

context.rotate(angle);

Ví dụ:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75;

context.translate(canvas.width / 2, canvas.height / 2); // xoay 45 độ theo chiều kim đồng hồ context.rotate(Math.PI / 4); context.fillStyle = "blue"; context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); };

Kéo giãn một đối tượng trong khung HTML5 Canvas

Kéo giãn 1 đối tượng chúng ta có thể dùng phương thức tranform bằng cách sử dụng ma trận hệ

tọa độ như đã được học trong đồ họa

context.transform(1,sy,sx,1,0,0);


Page 62

Ví dụ:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; // ma trận dùng để : // 1 sx 0 // sy 1 0 // 0 0 1 var sx = 0.75; // .75 horizontal shear var sy = 0; // no vertical shear // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // apply custom transform context.transform(1, sy, sx, 1, 0, 0);


Xoay lật 1 đối tượng trong HTML5 Canvas

Phương thức này dùng để lật ngược 1 đối tượng so với trục Ox hoặc trục Oy tùy theo phương

thức chúng ta chọn context.scale(-1,1); //lật so với trục Ox context.scale(1,-1); // lật so với trục Oy

Ví dụ: window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // dịch chuyển hình vẽ về trung tâm khung vẽ context.translate(canvas.width / 2, canvas.height / 2); // lật so với trục Ox context.scale(-1, 1); context.font = "30pt Calibri"; context.textAlign = "center"; context.fillStyle = "blue"; context.fillText("Hello!", 0, 0);


Page 63

};

IX. HTML5 SVG

SVG là gì? trước khi học SVG các bạn cần có chút kiến thức về html và xml

SVG là viết tắt của Scalable Vector Graphics

SVG được sử dụng để xác định các đồ họa vector dựa trên Web

SVG định nghĩa đồ họa trong định dạng XML

SVG đồ họa không mất bất kỳ chất lượng nếu họ được thu nhỏ hoặc thay đổi kích cỡ

Mỗi phần tử và thuộc tính tất cả trong các tập tin SVG có thể được hoạt hình

SVG là một công nghệ mới dựa trên định dạng XML cho phép tạo các đối tượng đồ họa phức tạp

để hiển thị trên trình duyệt. Được bắt đầu phát triển từ 1999, hiện tại phiên bản thứ hai của SVG

đã được tổ chức W3C chính thức ra mắt vào tháng 8/2011.

Các ảnh SVG được vẽ dưới dạng vector thông qua XML nên chúng có thể dễ dàng được chỉnh

sửa bởi bất kì trình soạn thảo văn bản nào. Hơn nữa việc lưu trữ, truyền tải cũng dễ dàng và

không cần phải quan tâm đến việc chất lượng ảnh.

ví dụ vẽ một hình tròn bằng html5 SVG

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


Page 64

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

- dòng 1 chứa các khai báo xml,

standalone=‖no‖ : tài liệu SVG có tham chiếu tới tập tin bên ngoài.

- dòng 2 ,3 : tham khảo tài liệu SVG tại w3.org, đây là chuẩn

- dòng 5,6,7,8 : cấu trúc thẻ <svg></svg>

+ thuộc tính xmlns : xác định phiên bản sử dụng tại w3.org

+ thẻ <cicle/> : vẽ vòng tròn, với cx,cy là tọa độ x,y xác định tâm đường tròn, nếu không khai

báo cx,cy thì tâm đường tròn sẽ mặc định tọa độ là (0,0). và r là bán kính đường tròn

+ dòng này: stroke=‖black‖ stroke-width=‖2″ fill=‖red‖ : vẽ đường tròn với viền đen,boder viền

là 2,và tô màu đỏ ben trong đường tròn

* chú ý: mọi người đã biết xml đòi hỏi phải viết chính xác,khi

SVG viết bằng xml thì mỗi lần đóng mở thẻ các bạn phải chú ý

nhe,

Xử lý SVG trong trang html

Bài này sẽ hướng dẫn các bạn xử lý 1 số kỹ thuật về SVG cho một trang html

- chúng ta có thể nhúng các tập tin SVG vào trang html bằng các thẻ <embed>, <object>,

<iframe>

-hoặc các bạn có thể dùng trực tiếp ‖code SVG‖ bỏ trực tiếp vào trang html mà không cần phải

xử dụng qua thẻ

Nhúng SVG Với Tag <embed> -ưu điểm: tất cả các trình duyệt đều hỗ trợ tốt và cho phép chúng thực thi code

- nhược điểm: không dùng được với html4 và xhtml,chỉ dùng cho html5

cú pháp: <embed src="circle1.svg" type="image/svg+xml" />

Nhúng SVG Với Tag <object>

Ưu điểm : hỗ trợ tất cả các trình duyệt, các chuẩn HTML4, XHTML, và HTML5

nhược điểm: không cho phép thực thi code

Cú pháp: <object data="circle1.svg" type="image/svg+xml"></object>

Nhúng SVG Với Tag <iframe> ửu điểm : các trình duyệt đều hỗ trợ

nhược điểm : không được tốt với chuẩn HTML4/XHTML <iframe src="circle1.svg"></iframe>

Nhúng code SVG trực tiếp vào HTML - các trình duyệt hỗ trợ :Firefox, Internet Explorer 9, Google Chrome, Opera, Safari <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1">


Page 65

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>

</body> </html>

-link đến file svg,các bạn cũng có thể để trong tag <a> <a href="circle1.svg">xem tập tin SVG file<a>

–> tóm lại, không có cách nào tốt nhất, tùy nhu cầu của bạn,bạn có thể chọn cách phù hợp

nhất.

X. HTML5 trong tương lai

HTML5 cho phép tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của

bất kỳ thiết bị nào. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm

về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn.

Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển. Nếu như trước đây, bạn phải

dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để

lướt web, thì giờ đây với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất

nhiều trình duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt ―net‖ ở bất kỳ đâu. Tuy nhiên

với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng

hạn, trên máy tính bạn xem trang web này rất tốt, nhưng trên ĐTTM thì giao diện và cấu trúc

trang bị xáo trộn. Hay bạn có thể xem phim rất tốt với IE nhưng với Firefox thì không.

Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên bất kỳ thiết bị nào cũng

có thể xem được đầy đủ, trọn vẹn nội dung, thông tin trên internet.

HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có thể hoạt động tốt trên

nhiều trình duyệt khác nhau của bất kỳ thiết bị nào – từ MTĐB, MTXT cho đến ĐTTM. Không

những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web


Page 66

nhanh hơn, tốt hơn, tài nguyên phong phú hơn.

Một số phần tử mới

HTML5 vẫn giữ lại các cấu trúc cơ bản như <HEADER>, <FOOTER>, nhưng được bổ sung các

phần tử mới, chẳng hạn <CANVAS>, <AUDIO>.

Các phần tử trong cấu trúc mới

• <HEADER>: chứa thông tin giới thiệu của một phần hay một trang hoặc bất cứ thông tin gì

của tiêu đề tài liệu hay tiêu đề nội dung của một bảng.

• <NAV>: chứa đường liên kết đến trang khác hoặc phần khác trên cùng trang, không nhất thiết

chứa tất cả liên kết, chỉ cần đường chuyển hướng chính.

• <SECTION>: đại diện cho một phần tài liệu hay ứng dụng, cách thức hoạt động tương tự

<DIV>.

• <ARTICLE>: đại diện một phần của trang, có thể đứng độc lập, chẳng hạn blog post, forum

entry… hay bất kỳ thành phần nội dung đứng độc lập nào.

• <ASIDE>: đại diện cho nội dung có liên quan đến phần tài liệu chính hay các đoạn trích dẫn.

• <FOOTER>: đánh dấu không chỉ cuối trang hiện hành mà còn mỗi phần có trong trang. Vì

vậy, <FOOTER> có thể dùng nhiều lần trong một trang.

Hình bên dưới sẽ giúp bạn thấy rõ hơn cấu trúc mới:

<HEADER>, <FOOTER> không chỉ đại diện cho phần đầu, phần cuối của trang hiện hành, mà

còn là đại diện phần đầu, phần cuối của một phần tài liệu, hơn nữa, bạn có thể dùng <THEAD>,

<TFOOT> trong các bảng dữ liệu. Việc sử dụng cấu trúc với các phần tử mới này giúp việc lập

trình thuận tiện hơn.

Một số đặc điểm mới

Với sự đóng góp, cải tiến của các nhà phát triển trình duyệt như Google (trình duyệt Chrome),

Apple (Safari), Mozilla (Firefox),…; HTML5 giờ đây đang dần hoàn thiện và có nhiều đặc tính

khá tinh tế:


Page 67

Lưu trữ ngoại tuyến (offline): cho phép lưu trữ dữ liệu liên tục hay từng phần mà không cần cài

đặt tính năng bổ sung (plug-in), tương tự như Google Gears.

Miền vẽ (canvas drawing) cho phép tương tác trực tiếp với hình ảnh, biểu đồ, các đối tượng

trong game (game component) thông qua các mã lập trình và tương tác người dùng – không cần

Flash hay các plug-in.

Truyền nhận hình ảnh (video) và âm thanh (audio) trung thực: hiện đang trong quá trình hoàn

thiện và thống nhất các chuẩn định dạng. Đến một ngày nào đó, YouTube và Pandora có thể sẽ

không cần đến Flash nhưng vẫn đem đến cho bạn những đoạn video, âm thanh hấp dẫn.

Định vị người dùng (geolocation): HTML5 có thể giúp xác định vị trí của bạn và dùng nó để

thực hiện cho một công việc nào đó, chẳng hạn phục vụ cho các kết quả tìm kiếm, cập nhật

Twitter hay dùng cho các thiết bị định vị. HTML5 không giới hạn API của nhà cung cấp hay

công cụ trình duyệt nào.

Mẫu nhập thông minh (smarter form): hộp tìm kiếm, dòng nhập thông tin, vùng thông tin hợp

lệ… sẽ được kiểm soát tốt hơn, ít gây phiền toái cho người dùng khi họ điền thông tin, dữ liệu.

Tiếp cận các ứng dụng web dễ dàng (web application focus): chẳng hạn như việc xây dựng các

trang wiki, công cụ kéo thả, bảng thảo luận, chat thời gian thực. Việc thực hiện các ứng dụng này

sẽ nhanh chóng hơn và chúng có thể làm việc như nhau trên các trình duyệt.

Lợi ích mà HTML5 đem lại

Lợi ích to lớn nhất mà HTML5 đem lại là khả năng hỗ trợ API (Application Programming

Interface – giao diện lập trình ứng dụng) và DOM (Document Object Model – mô hình đối tượng

tài liệu hay cây cấu trúc dữ liệu).

HTML5 cho phép mở rộng dễ dàng với API. Điều này sẽ giúp các nhà phát triển tự do hơn trong

việc sáng tạo các ứng dụng thân thiện hơn với người dùng khi mà họ còn lệ thuộc vào nền tảng

Flash – lưu trữ dữ liệu và trình diễn ảnh động. Cùng với việc hỗ trợ bộ nhớ ứng dụng

(application cache) và khả năng offline, HTML5 sẽ mở ra nhiều cơ hội tương lai cho các ứng

dụng web. Khả năng offline có thể hình dung như việc Thunderbird, Outlook cho phép bạn kiểm

tra email ngay cả khi bạn làm việc offline nhưng với HTML5 bạn sẽ thực hiện điều này qua trình

duyệt. Đây là cầu nối quan trọng để mối ―lương duyên‖ giữa máy tính cá nhân và môi trường

web sớm hiện thực hơn. Google Gears cho chúng ta khả năng lưu trữ dữ liệu offline, Flash đem

đến cho người dùng những trải nghiệm về sức mạnh của bộ nhớ ứng dụng (Pandora dùng nó để


Page 68

lưu trữ thông tin người dùng). Với HTML5, những khả năng này hiện đã sẵn sàng và có thể dễ

dàng mở rộng với JavaScript.

Một lợi ích nữa, với HTML5, nhà phát triển chỉ cần lập trình một lần là có thể dùng được trên

nhiều hệ thống, không như Flash hay các plug-in khác luôn cần có nhiều phiên bản khác nhau

dành cho mỗi nền tảng.

Mặc dù Flash, SilverLight… vẫn là các plug-in đang hoạt động tốt, nhưng các nhà phát triển vẫn

ra sức ủng hộ HTML5. Đơn giản vì: thứ nhất, tuy Flash hoạt động tốt nhưng đôi khi nó gây ra

hiện tượng rò bộ nhớ (memory leak) hay làm nghẽn hệ thống (crash); thứ hai, HTML5 giúp tập

trung, quản lý các phần tử tương tác trên trang web một cách tự nhiên, dựa vào các đoạn mã; thứ

3, HTML5 giúp JavaScipt hiện thực dễ dàng hơn. Một điểm nữa cho HTML5 là khả năng hỗ trợ

nhà lập trình chuyển đổi từ XHTML.

Một khi có nhiều trình duyệt và nhiều nhà phát triển hỗ trợ các chuẩn tương tác video, audio của

HTML5, thì ý tưởng về một cửa hàng cung cấp ứng dụng dùng được trên nhiều thiết bị, nền tảng

– ĐTTM, MTĐB, MTXT, Windows, Mac, Linux – sẽ trở thành hiện thực.

Ứng dụng

HTML5 hiện đang được sử dụng trên một số điện thoại có trình duyệt nền tảng Webkit như Palm

Pre, iPhone 3Gs, Google Android. Gần đây, Google cũng đã tích hợp sẵn HTML5 vào Wave

nhằm xây dựng ứng dụng tất cả trong một từ blog, wiki, IM (instant messaging), e-mail cho đến

giao tiếp đồng bộ. Trình duyệt Firefox 3.5 cũng đã hỗ trợ HTML5 với các thẻ <VIDEO> và

<AUDIO>, theo định dạng .ogg.

HTML5 vẫn đang còn là bản dự thảo, nhưng với sự hỗ trợ mạnh mẽ từ các nhà phát triển trình

duyệt Google, Apple, Mozilla… thì nó có khả năng ―khuynh đảo‖ thị trường ứng dụng web, và

sớm trở thành chuẩn web chính thức. Một số trình duyệt có hỗ trợ HTML5 (tùy mức độ):

Firefox, Chrome, Safari, Opera.

Documents

[ClubITviet.com]Gioi Thieu Tong Quan Ve Html5