Các nguyên tắc cơ bản về HTML5

Tuy nhiên, HTML5 có các nhãn tr c quan, có kh năng mô t cao... Your browser does not support the HTML 'audio' element... Trư ệ ường Name, là ki uể text, có ba thu cộ tính m i là:ớ place

Trang 1

Grace Walker , m t đ i tác trong Walker Automated Services (Các d ch v t ộ ố ị ụ ự

đ ng Walker) Chicago, Illinois, là m t chuyên gia t v n Công ngh thông ộ ở ộ ư ấ ệ tin (CNTT) có n n t ng đa d ng và kinh nghi m r ng rãi Bà đã làm vi c trong ề ả ạ ệ ộ ệ lĩnh v c CNTT v i t cách là giám đ c, nhà qu n tr , nhà l p trình, gi ng viên, ự ớ ư ố ả ị ậ ả nhà phân tích kinh doanh, nhà phân tích k thu t, nhà phân tích h th ng, và ỹ ậ ệ ố nhà phát tri n Web trong các môi tr ể ườ ng khác nhau, bao g m vi n thông, ồ ễ giáo d c, các d ch v tài chính, và ph n m m ụ ị ụ ầ ề

Đây là t p tài li u t ng h p bài vi t c a Grace Walker v HTML5 đậ ệ ổ ợ ế ủ ề ược đăng và d chị trên trang ch IBM (ủ http://www.ibm.com) Mình ch edit l i cho d đ c và t ng h pỉ ạ ễ ọ ổ ợ thành 1 ebook thôi

Các n i dung ộ

Trang 2

Các quy t c c b n c a HTML5, ắ ơ ả ủ

Ph n 1: B t đ u ầ ắ ầ

Grace Walker , Chuyên gia t v n CNTT, Walker Automated Services ư ấ

Tóm t t: ắ HTML5 ph n ánh nh ng thay đ i to l n theo cách mà bây gi b n kinhả ữ ổ ớ ờ ạdoanh trên web và trong đám mây Bài vi t này là bài đ u tiên trong m t lo t bài b nế ầ ộ ạ ố

ph n đầ ược thi t k đ t p trung vào nh ng thay đ i trong HTML5, b t đ u b ng cácế ế ể ậ ữ ổ ắ ầ ằ

th m i và t ch c trang và cung c p thông tin c p cao v thi t k trang web, t oẻ ớ ổ ứ ấ ấ ề ế ế ạ các bi u m u, s d ng và giá tr c a các API, và các kh năng sáng t o mà Canvasể ẫ ử ụ ị ủ ả ạ(Khung n n nh) cung c p.ề ả ấ

HTML5 là m t ngôn ng độ ữ ược thi t k đ thi t l p n i dung web Nó nh m làm choế ế ể ế ậ ộ ằ

vi c thi t k và phát tri n web d dàng h n b ng cách t o m t giao di n ngôn ngệ ế ế ể ễ ơ ằ ạ ộ ệ ữ đánh d u chu n hóa và tr c quan HTML5 cung c p các phấ ẩ ự ấ ương ti n phân tích vàệphân đ nh các trang c a b n, và nó cho phép b n t o các thành ph n r i r c khôngị ủ ạ ạ ạ ầ ờ ạ

ch đỉ ược thi t k đ c u t o trang web c a b n m t cách h p lý mà còn đế ế ể ấ ạ ủ ạ ộ ợ ượ ạ c t o

ra đ cung c p cho trang web c a b n các kh năng cung c p thông tin HTML5 cóể ấ ủ ạ ả ấ

th để ược g i là "cách ti p c n l p b n đ thông tin đ thi t k trang web" do nó k tọ ế ậ ậ ả ồ ể ế ế ế

h p y u t c b n v l p b n đ thông tin, phân chia và ghi nhãn thông tin giúp dợ ế ố ơ ả ề ậ ả ồ ễ dàng s d ng và hi u thông tin Đây là n n t ng c a ti n ích ng nghĩa và th m mử ụ ể ề ả ủ ệ ữ ẩ ỹ gây n tấ ượng sâu s c c a HTML5 HTML5 cung c p kh năng xu t b n t t c m iắ ủ ấ ả ấ ả ấ ả ọ

th trên th gi i t n i dung văn b n đ n gi n đ n đa phứ ế ớ ừ ộ ả ơ ả ế ương ti n phong phú,ệ

tương tác cho các nhà thi t k và các nhà phát tri n m i trình đ ế ế ể ở ọ ộ

Các t vi t t t thông d ng ừ ế ắ ụ

• API: Giao di n l p trình ng d ngệ ậ ứ ụ

• CSS3: B ng đ nh ki u x p ch ng phiên b n 3ả ị ể ế ồ ả

• GUI: Giao di n ngệ ười dùng đ h aồ ọ

• HTML: Ngôn ng đánh d u siêu văn b nữ ấ ả

• HTML5: HTML phiên b n 5ả

• SQL: Ngôn ng truy v n có c u trúcữ ấ ấ

• UI: Giao di n ngệ ười dùng

•

HTML5 cung c p các công c qu n lý d li u, v , video, và âm thanh có hi u qu ấ ụ ả ữ ệ ẽ ệ ả

Nó t o đi u ki n cho s phát tri n c a các ng d ng gi a các trình duy t v i nhauạ ề ệ ự ể ủ ứ ụ ữ ệ ớ

Trang 3

cho trang web cũng nh cho các thi t b di đ ng HTML5 là m t trong nh ng côngư ế ị ộ ộ ữngh thúc đ y nh ng c i ti n trong các d ch v đi n toán đám mây di đ ng, vì nóệ ẩ ữ ả ế ị ụ ệ ộtính đ n tính linh ho t r ng h n, cho phép phát tri n các trang web thú v và có khế ạ ộ ơ ể ị ả năng tương tác Nó cũng đ a vào th và các c i ti n m i, bao g m c u trúc thuư ẻ ả ế ớ ồ ấ

nh , các nút đi u khi n c a bi u m u, các API, đa phỏ ề ể ủ ể ẫ ương ti n, h tr c s dệ ỗ ợ ơ ở ữ

li u, và t c đ x lý nhanh h n đáng k ệ ố ộ ử ơ ể

Các th m i trong HTML5 có tính h p d n cao, bao tr n c vai trò và cách s d ngẻ ớ ấ ẫ ọ ả ử ụ

c a chúng Các phiên b n trủ ả ước c a HTML thủ ường dùng các th không có gì n iẻ ổ

b t c Tuy nhiên, HTML5 có các nhãn tr c quan, có kh năng mô t cao Nó cungậ ả ự ả ả

c p các nhãn n i dung phong phú ngay l p t c xác đ nh n i dung Ví d ,ấ ộ ậ ứ ị ộ ụ thẻ <div> b khai thác quá m c đã đị ứ ược bổ sung b ng cácằthẻ <section> và <article> Ngoài ra các thẻ <video> , <audio> , <canvas> ,

và<figure> cũng đ a ra s mô t chính xác h n v các ki u n i dung c th ư ự ả ơ ề ể ộ ụ ể

HTML5 cung c p: ấ

• Các th mô t chính xác nh ng gì chúng đẻ ả ữ ược thi t k đ ch a đ ng.ế ế ể ứ ự

• Truy n thông m ng đề ạ ược tăng cường

• L u tr chung đư ữ ược c i thi n r t nhi u.ả ệ ấ ề

• Các trình làm vi c trên n n Web (Web Workers) đ ch y các quá trình n n.ệ ề ể ạ ề

• Giao di n WebSocket đ thi t l p k t n i liên t c gi a các ng d ng c trúệ ể ế ậ ế ố ụ ữ ứ ụ ư

• Canvas và video, đ thêm đ h a và video mà không c n cài đ t các trìnhể ồ ọ ầ ặ

c m thêm c a bên th ba.ắ ủ ứ

• Đ c t Geolocation API (API đ nh v toàn c u), s d ng kh năng đ nh v c aặ ả ị ị ầ ử ụ ả ị ị ủ máy đi n tho i thông minh đ k t h p các d ch v và các ng d ng đám mâyệ ạ ể ế ợ ị ụ ứ ụ

di đ ng.ộ

• Các bi u m u c i ti n làm gi m nhu c u ph i t i v mã JavaScript, cho phépể ẫ ả ế ả ầ ả ả ềtruy n thông hi u qu h n gi a các thi t b di đ ng và các máy ch đi nề ệ ả ơ ữ ế ị ộ ủ ệ toán đám mây

HTML5 t o ra s tr i nghi m ngạ ự ả ệ ười dùng h p d n h n: Các trang đấ ẫ ơ ược thi t kế ế

b ng HTML5 có th cung c p m t tr i nghi m gi ng nh v i các ng d ng c aằ ể ấ ộ ả ệ ố ư ớ ứ ụ ủ máy tính đ bàn HTML5 cũng cung c p phát tri n nhi u n n t ng nâng cao b ngể ấ ể ề ề ả ằcách k t h p kh năng c a các API v i s có m t kh p m i n i c a trình duy t.ế ợ ả ủ ớ ự ặ ở ắ ọ ơ ủ ệ Khi s d ng HTML5, các nhà phát tri n có th cung c p m t tr i nghi m ng d ngử ụ ể ể ấ ộ ả ệ ứ ụ

hi n đ i, trôi ch y qua các n n t ng.ệ ạ ả ề ả

Khi b n nói HTML5, b n đang s d ng phép t c ký cho s đ i m i liên t c Các thạ ạ ử ụ ố ự ổ ớ ụ ẻ

m i, các phớ ương th c m i, và m t khung công tác phát tri n chung d a trên s tácứ ớ ộ ể ự ự

đ ng l n nhau c a HTML5 và hai đ i tác c a nó, CSS3 và JavaScript Đây là c t lõiộ ẫ ủ ố ủ ố

c a hi n tủ ệ ượng x lý ng d ng l y máy khách làm trung tâm Ngoài các vi c tri nử ứ ụ ấ ệ ể khai các k thu t và các phỹ ậ ương th c c a công ngh HTML5 cho máy tính đ bàn,ứ ủ ệ ể

có th tri n khai th c hi n HTML5 trong nhi u trình duy t đi n tho i di đ ng web cóể ể ự ệ ề ệ ệ ạ ộ

Trang 4

tính năng phong phú — m t th trộ ị ường đang phát tri n, khi đã ch ng ki n s phể ứ ế ự ổ

bi n và lan tràn c a các h đi u hành web Apple iPhone, Google Android, và cácế ủ ệ ề

đi n tho i ch y Palm.ệ ạ ạ

M t khía c nh quan tr ng v s c m nh c a HTML5 là l p b n đ thông tin — ho cộ ạ ọ ề ứ ạ ủ ậ ả ồ ặ

ch n n i dung, n u b n thích — t o ra m t quá trình d hi u h n nhi u B n có thặ ộ ế ạ ạ ộ ễ ể ơ ề ạ ể

th y công c này thích h p cho vi c thi t k và phát tri n hi u qu nh th nào nhấ ụ ợ ệ ế ế ể ệ ả ư ế ờ

u th ngày càng tăng c a nó trong th gi i x lý web

HTML5 báo hi u s ra đ i c a m t quá trình ng nghĩa có hi u qu h n m c vănệ ự ờ ủ ộ ữ ệ ả ơ ở ứ

b n và ki m soát t t h n qua vi c xây d ng và s d ng các bi u m u T t cả ể ố ơ ệ ự ử ụ ể ẫ ấ ả

nh ng ph m ch t này và nhi u đi m t t đ p khác n a c a s đ i m i HTML5 là cữ ẩ ấ ề ể ố ẹ ữ ủ ự ổ ớ ơ

s cho s th ng tr ngày càng tăng c a mô hình này Nhi u th c th c quan,ở ự ố ị ủ ề ự ể ơ

thương m i và các t ch c khác n a — th m chí nhi u t ch c trong s đó h u nhạ ổ ứ ữ ậ ề ổ ứ ố ầ ư liên quan r t ít đ n vi c x lý thông tin và truy n thông nh là ho t đ ng c quanấ ế ệ ử ề ư ạ ộ ơchính c a h — theo m c đ này hay m c khác b tràn ng p b i s phát tri n c aủ ọ ứ ộ ứ ị ậ ở ự ể ủ

hi n tệ ượng đang phát tri n này.ể

HTML5 không ph i là cây đèn th n, và không có gì là th n thánh c Tuy nhiên, cácả ầ ầ ảtài s n k thu t và phả ỹ ậ ương pháp lu n c a nó đã làm cho nó tr thành đi u t t nh tậ ủ ở ề ố ấ ngay sau khi c xát vào đèn.ọ

Trang web mà b n t o ra s có thi t k cao c p đạ ạ ẽ ế ế ấ ược hi n th trong Hình 1 Thi tể ị ế

k trang có m t vùng Header (Tiêu đ ), m t vùng Navigation (Chuy n hế ộ ề ộ ể ướng), m tộ vùng Article (Bài vi t) có ch a ba Section (ph n), m t Aside (Nh n xét), và cu iế ứ ầ ộ ậ ố cùng, là vùng Footer (Chân trang) Trang này được thi t k đ làm vi c trong trìnhế ế ể ệduy t Google Chrome, tr m t s th l n x n th y đệ ừ ộ ố ứ ộ ộ ấ ược, có th x y ra cùng v i khể ả ớ ả năng tương thích gi a các trình duy t, b t ngu n t vi c hi u ch nh cũng nh c nữ ệ ắ ồ ừ ệ ệ ỉ ư ả

tr hi u bi t v c u trúc c b n M c đích là đ t o ra m t trang mô t rõ ràng vi cở ể ế ề ấ ơ ả ụ ể ạ ộ ả ệ

s d ng các th HTML5 m i, cho th y b n có th s d ng chúng nh th nào đử ụ ẻ ớ ấ ạ ể ử ụ ư ế ể

t o ra mã đúng đ nh d ng và thi t k trang ng n g n.ạ ị ạ ế ế ắ ọ

Hình 1 K ho ch trang web c a Acme United ế ạ ủ

Trong quá trình t o trang này, tôi đ ng ph i CSS3, c n thi t đ bi u th đúng cácạ ụ ả ầ ế ể ể ịtrang HTML5 CSS3 là c n thi t cho đ nh ki u, chuy n hầ ế ị ể ể ướng, và c m nh n chungả ậ

v trang HTML5 Các nhóm đ c tính c a nó, mà b n có th tìm th y t i trang webề ặ ủ ạ ể ấ ạ

Trang 5

tham kh o CSS3 W3Schools (xemả Tài nguyên), bao g m m t s ph n t có íchồ ộ ố ầ ử

nh n n, phông ch , màn che, và hình nh đ ng.ư ề ữ ả ộ

Tuy nhiên, trước khi b n b t đ u xây d ng trang web này, b n c n ph i tìm hi u vạ ắ ầ ự ạ ầ ả ể ề

m t s th m i c a HTML5.ộ ố ẻ ớ ủ

Vùng Header

Vùng Header ví d ch a tiêu đ và ph đ trang B n s d ng thụ ứ ề ụ ề ạ ử ụ ẻ <header> để

t o ra n i dung cho vùngạ ộ Header c a trang Thủ ẻ<header> có th ch a thông tinể ứ

m v m tở ề ộ <section> và <article> ngoài chính trang web đó Trang web đượ c

t o ra đây có m t vùngạ ở ộ Header cho trang này, được hi n th trong thi t k caoể ị ế ế

c p, cũng nh vùngấ ư Header bên trong vùng Article và Section Li t kê 1 đ a raở ệ ư

m t ví d đánh d u thộ ụ ấ ẻ <header>

Li t kê 1 Ví d th ệ ụ ẻ <header>

<h1>Heading Text</h1>

<p> Text or images can be included here</p>

<p> Logos are frequently placed here too</p>

B n t o vùng Navigation (Chuy n hạ ạ ể ướng) c a trang b ng cách s d ng thủ ằ ử ụ ẻ <nav>

Ph n tầ ử <nav> đ nh nghĩa m t vùng đ c bi t dành cho chuy n hị ộ ặ ệ ể ướng.Thẻ <nav> nên được s d ng đ chuy n hử ụ ể ể ướng trang web chính, không dùng để thi t l p các liên k t có ch a trong các vùng khác c a trang Vùng Navigation nàyế ậ ế ứ ủ

có th ch a mã nh để ứ ư ược hi n th trong Li t kê 3.ể ị ệ

Li t kê 3 Ví d th ệ ụ ẻ <nav>

<nav>

<ul>

<li><a href="#">About Us</a></li>

<li><a href="#">Our Products</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

Trang 6

Các vùng Article và Section

Trang web mà b n đang thi t k có ch a m t ph n Article, gi n i dung th c sạ ế ế ứ ộ ầ ữ ộ ự ự

c a trang B n s d ng thủ ạ ử ụ ẻ <article> đ t o vùng này, và th đó đ nh nghĩa n iể ạ ẻ ị ộ dung có th để ược s d ng đ c l p v i các n i dung khác đử ụ ộ ậ ớ ộ ược tìm th y trên trangấnày Ví d , n u b n mu n t o ra m t ngu n c p d li u RSS, b n có th sụ ế ạ ố ạ ộ ồ ấ ữ ệ ạ ể ử

d ngụ <article> đ xác đ nh n i dung duy nh t Thể ị ộ ấ ẻ<article> xác đ nh n i dung cóị ộ

th để ược g b và đỡ ỏ ược đ t trong ng c nh khác và có th hoàn toàn d hi u.ặ ữ ả ể ễ ể

Vùng Article trong k ho ch c a Acme United có ch a ba vùng Section B n t o raế ạ ủ ứ ạ ạcác vùng này b ng cách s d ng thằ ử ụ ẻ<section> M tộ <section> ch a các vùngứthành ph n c a n i dung trang web có liên quan Thầ ủ ộ ẻ <section> — và thẻ<article> n a — có th ch a các header (tiêu đ ), các footer (chân trang), ho cữ ể ứ ề ặ

b t kỳ các thành ph n nào khác c n thi t đ hoàn thành ph n này.ấ ầ ầ ế ể ầThẻ <section> dùng cho n i dung t o nhóm N i dung cho c hai thộ ạ ộ ả ẻ <section> và thẻ <article>thường b t đ u b ng m tắ ầ ằ ộ <header> và k t thúc b ng m tế ằ ộ <footer>,

v i n i dung cho th này gi a.ớ ộ ẻ ở ữ

Thẻ <section> cũng có th ch a các thể ứ ẻ <article>, cũng gi ng nhố ư thẻ <article> có th ch a các thể ứ ẻ <section> Thẻ<section> nên được dùng đ t oể ạ nhóm thông tin gi ng nhau, và thố ẻ <article> nên được s d ng cho các thông tinử ụ

nh m t bài vi t ho c m t blog mà chúng có th b g b và đư ộ ế ặ ộ ể ị ỡ ỏ ược đ t trong m tặ ộ

ng c nh m i mà không nh hữ ả ớ ả ưởng đ n ý nghĩa c a n i dung Thế ủ ộ ẻ <article> như tên g i c a nó, cung c p m t gói thông tin đ y đ Ngọ ủ ấ ộ ầ ủ ượ ạc l i, thẻ <section> ch aứ thông tin liên quan, tr thông tin không th đừ ể ược đ t trong m t ng c nh khác v iặ ộ ữ ả ớ chính nó, do nghĩa c a nó s b m t.ủ ẽ ị ấ

Xem Li t kê 4 v i m t ví d v cách s d ng thệ ớ ộ ụ ề ử ụ ẻ <article> và <section>

Li t kê 4 Ví d th ệ ụ ẻ <article> và th ẻ <section>

Thẻ <figure> có th ch a thể ứ ẻ <figcaption>, th này ch a l n lẻ ứ ầ ượt các chúthích cho hình minh h a có trong thọ ẻ <figure>, cho phép b n nh p m t mô t đạ ậ ộ ả ể

có th g n hình minh h a ch t ch h n v i n i dung Li t kê 5 đ a ra m t ví d vể ắ ọ ặ ẽ ơ ớ ộ ệ ư ộ ụ ề

c u trúc thấ ẻ<figure> và thẻ <figcaption>.

Li t kê 5 Ví d th ệ ụ ẻ <figure> và th ẻ <figcaption>

Trang 7

<figcaption>Caption for the figure</figcaption>

</figure>

Các ph n t ph ầ ử ươ ng ti n ệ

Các thẻ <section> và <article> cũng có th ch a các ph n t phể ứ ầ ử ương ti nệ khác nhau HTML5 cung c p các th đ truy n đ t nhanh m t s hi u bi t v n iấ ẻ ể ề ạ ộ ự ể ế ề ộ dung c a chúng Các ph n t phủ ầ ử ương ti n, ch ng h n nh âm nh c và videoệ ẳ ạ ư ạ

thường trước đây ch nhúng vào, bây gi có th đỉ ờ ể ược xác đ nh chính xác h n.ị ơ

Thẻ <audio> xác đ nh n i dung âm thanh, ch ng h n nh âm nh c ho c lu ng âmị ộ ẳ ạ ư ạ ặ ồthanh khác b t kỳ Thấ ẻ <audio> có các thu c tính đ ki m soát nh ng gì, khi nào,ộ ể ể ữ

và làm th nào đ âm thanh s đế ể ẽ ược phát Các thu c tính làộ src, preload (n pạ

trước),control (đi u khi n),ề ể loop (vòng l p), vàặ autoplay (phát t đ ng) Trongự ộ

ví d Li t kê 6, âm thanh b t đ u phát ngay sau khi t i trang này và s phát liênụ ở ệ ắ ầ ả ẽ

t c và đ a ra các nút đi u khi n đ ngụ ư ề ể ể ười dùng có th d ng l i ho c phát l i âmể ừ ạ ặ ạthanh

Li t kê 6 Ví d th ệ ụ ẻ <audio>

Your browser does not support the audio tag.

</audio>

Thẻ <video> cho phép b n phát các đo n video ho c t o lu ng phạ ạ ặ ạ ồ ương ti n tr cệ ự quan Nó có t t c các thu c tính c a thấ ả ộ ủ ẻ<audio> c ng thêm ba thu c tính n aộ ộ ữ là: poster (qu ng cáo),ả width (chi u r ng), vàề ộ height (chi u cao) Thu cề ộ tính postercho phép b n xác đ nh m t hình nh đạ ị ộ ả ược s d ng trong khi videoử ụđang t i ho c trong hoàn c nh không may khi các video s không t i đả ặ ả ẽ ả ược chútnào

Li t kê 7 cung c p m t ví d v c u t o thệ ấ ộ ụ ề ấ ạ ẻ <video>.

Li t kê 7 Ví d th ệ ụ ẻ <video>

Your browser does not support the video tag

</video>

Các thẻ <video> và <audio> có th ch a thể ứ ẻ <Source>, đ đ nh nghĩa tàiể ịnguyên đa phương ti n cho các thệ ẻ <video> và<audio>. V i ph n t này, b nớ ầ ử ạ

đ nh rõ các t p video và âm thanh thay th đ t các t p này sau đó trình duy t cóị ệ ế ể ừ ệ ệ

th l a ch n d a vào ki u phể ự ọ ự ể ương ti n c a mình ho c s h tr c a codec (b mãệ ủ ặ ự ỗ ợ ủ ộhóa/gi i mã) Trong Li t kê 8, có hai s l a ch n N u không th phát phiên b nả ệ ự ự ọ ế ể ả WMA c a t p này trong trình duy t đang đủ ệ ệ ược s d ng, thì hãy th MP3 N uử ụ ử ế không, s hi n th thông báo đ ngẽ ể ị ể ườ ử ụi s d ng bi t lý do âm thanh không có s n.ế ẵ

Li t kê 8 Ví d th ệ ụ ẻ <source>

Trang 8

<p>Your browser does not support the HTML 'audio' element.</p>

</audio>

Thẻ <embed> đ nh nghĩa n i dung nhúng có th đị ộ ể ược đ a vào m t trang — ví d ,ư ộ ụ

m t trình c m thêm cho các t p SWF c a Adobe Flash Li t kê 9 có ch a thu cộ ắ ệ ủ ệ ứ ộ tính type (ki u), xác đ nh ngu n nhúng là m t t p Flash.ể ị ồ ộ ệ

Li t kê 9 Ví d th ệ ụ ẻ <embed>

Ngoài các thu c tínhộ src và type, thẻ <embed> có có thu c tínhộ height (chi uề cao) và width (chi u r ng).ề ộ

Vùng Aside

B n t o vùng Aside theo k ho ch Acme United b ng cách s d ng thạ ạ ế ạ ằ ử ụ ẻ <aside>

Hãy nghĩ v th này khi c n t o n i dung b sung mà không còn ch nào c a bàiề ẻ ầ ạ ộ ổ ỗ ủ

vi t đ thêm vào Trong các t p chí, các vùng nh n xét thế ể ạ ậ ường được s d ng đử ụ ể làm n i b t m t đi m đã đổ ậ ộ ể ược th c hi n trong chính bài vi t đó Thự ệ ế ẻ <aside> ch aứ

n i dung có th độ ể ược lo i b mà không nh hạ ỏ ả ưởng đ n các thông tin đế ược truy nề

Ph n tầ ử <footer> ch a thông tin v m t trang, bài vi t, ho c m t ph n, ch ngứ ề ộ ế ặ ộ ầ ẳ

h n nh tác gi ho c ngày vi t bài Là m t ph n cu i trang, nó có th ch a b nạ ư ả ặ ế ộ ầ ố ể ứ ả quy n ho c thông tin pháp lý quan tr ng khác, nh trong Li t kê 11.ề ặ ọ ư ệ

Trang 9

Hình 2 Trang web Acme United

Nào, chúng ta hãy thi t l p trang Trế ậ ước tiên, có <!doctype>. Trong HTML5, <! doctype> đã được đ n gi n hóa: T t c m i th b n c n nh làơ ả ấ ả ọ ứ ạ ầ ớ html Vi c nàyệkhông ch làm đ n gi n hoá m c nh p cho th này, mà cũng làm cho nó nâng c pỉ ơ ả ụ ậ ẻ ấ

d dàng h n L u ý r ng nó không đễ ơ ư ằ ược g i làọ html5, mà ch làỉ html B t k cóấ ểbao nhiêu phiên b n HTML có th đ n và đi, thìả ể ế <!doctype>luôn luôn có th chể ỉ

Trang 10

duy t khi xem trang Thệ ẻ <link> trong Li t kê 13 xác đ nh b ng đ nh ki u CSS3 sệ ị ả ị ể ẽ

được s d ng đ bi u th trang HTML5 B ng đ nh ki u đử ụ ể ể ị ả ị ể ược g i là main-ọstylesheet.css

Li t kê 13 Ví d th <head> ệ ụ ẻ

<head>

<title>HTML5 Fundamentals Example</title>

</head>

Ti p theo, b n s d ng thế ạ ử ụ ẻ <body>, ngay sau các thẻ <header> và <hgroup>,

được mô t trên Vùngả ở <h1> trong ví d này ch a tên c a công ty h c u c aụ ứ ủ ư ấ ủ

b n, Acme United, và vùngạ <h2> ch a các thông tin thông báo cho b n r ng đó làứ ạ ằ

ph đ "M t ví d HTML5 đ n gi n" Li t kê 14 cho th y s đánh d u này.ụ ề ộ ụ ơ ả ệ ấ ự ấ

Li t kê 14 Ví d th ệ ụ ẻ <body> và th ẻ <header>

Cho đ n nay CSS3 thế ường dùng đ thi t l p trang để ế ậ ược hi n th trong Li t kê 15.ệ ị ệ

Trước tiên, b n thi t l p phông ch cho trang, và sau đó các chi ti t cho ph n thân.ạ ế ậ ữ ế ầ

B n đ nh nghĩa các kích thạ ị ước c a ph n thân, r i b n thi t k c u trúc đo n tiêu đủ ầ ồ ạ ế ế ấ ạ ề cho các th tiêu đ c p đ u tiên và c p th hai Đây là các tiêu đ mà b n s sẻ ề ấ ầ ấ ứ ề ạ ẽ ử

d ng cho trang này.ụ

Trang 11

Li t kê 16 Ví d th ệ ụ ẻ <nav>

<nav>

<ul>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

HTML5 cũng có m t thộ ẻ <menu> — m t th đã gây ra s nh m l n đ i v i m t sộ ẻ ự ầ ẫ ố ớ ộ ố nhà thi t k và các nhà phát tri n S nh m l n b t ngu n t th c t r ng vi cế ế ể ự ầ ẫ ắ ồ ừ ự ế ằ ệ chuy n hể ướng thường được đ c p nh là "trình đ n chuy n hề ậ ư ơ ể ướng" Thẻ <menu>,

đã b ph n đ i trong HTML phiên b n 4.01 và đị ả ố ả ược tái sinh trong HTML5, được thi tế

k đ tăng cế ể ường tính tương tác Không nên s d ng nó cho chuy n hử ụ ể ướng chính

Th duy nh t nên đẻ ấ ược s d ng cho chuy n hử ụ ể ướng chính là thẻ <nav>. B n s sạ ẽ ử

d ng thụ ẻ <menu>sau trong ví d này.ụ

Đ nh d ng c a chuy n hị ạ ủ ể ướng được CSS3 x lý M i đ nh nghĩa thử ỗ ị ẻ <nav> đượ c

hi n th trong Li t kê 17 đ i di n cho m t tr ng thái c th c a các ph nể ị ệ ạ ệ ộ ạ ụ ể ủ ầ

tử <ul> và <li> bên trong thẻ <nav>.

ch a m t thứ ộ ẻ <header> riêng c a mình Xem Li t kê 18.ủ ệ

Li t kê 18 Ví d th ệ ụ ẻ <article> và <section>

Trang 12

Thẻ <section> th hai trongứ <article> ch a cùng thông tin c b n nhứ ơ ả ư

là <section>, đ u tiên, nh ng l n này b n s s d ng m t thầ ư ầ ạ ẽ ử ụ ộ ẻ <aside>, m tộ thẻ <figure>, m t thộ ẻ <menu> , và m t thộ ẻ <mark> Xem Li t kê 20.ệ

Thẻ <aside> được s d ng đây đ trình bày thông tin không ph i là m t ph nử ụ ở ể ả ộ ầ

c a lu ng quanh nó Thủ ồ ẻ <figure> ch a m t nh đ h a c a Stonehenge.ứ ộ ả ồ ọ ủThẻ <section> này cũng ch a thứ ẻ <menu>, mà b n s d ng đ t o các nút nh nạ ử ụ ể ạ ấ

có các tên là 4 Muse Khi m t trong các nút này độ ược nh n, nó cung c p thông tinấ ấ

v Muse c th Thề ụ ể ẻ <mark> được s d ng bên trong thử ụ ẻ <p>đ làm n i b t cácể ổ ậ

từ veni, vidi, vici

Li t kê 20 Ví d th ệ ụ ẻ <article> và <section>

Trang 13

<button type="button" onClick="JavaScript:alert('Thalia ')">Thalia</button> <button type="button" onClick="JavaScript:alert

Đây là thành ph n cu i cùng c a ph n tầ ố ủ ầ ử <article>: ph nầ video Video ví d làụ

m t đ nh d ng ogg t đ ng phát khi trang độ ị ạ ự ộ ượ ảc t i, các vòng l p liên t c, và cungặ ụ

c p các nút đi u khi n đ t m d ng và phát Trong nhi u trấ ề ể ể ạ ừ ề ường h p hi n nay, cácợ ệvideo đ nh d ng ogg s d ng ph n m r ngị ạ ử ụ ầ ở ộ ogv (v cho video), nh trong Li t kê 22.ư ệThẻ <audio> làm vi c theo cùng cách này.ệ

Li t kê 22 Ví d ệ ụ <article> và <section>

controls autoplay loop>

<div class="no-html5-video"><p>This video will work in

Mozilla Firefox or Google Chrome only </p>

</div>

</video></p>

Trang 14

Li t kê 23 cung c p các đ nh nghĩa CSS3 cho ph nệ ấ ị ầ video.

Vi c hoàn thành trang web c a b n cũng k t thúc ph n đ u tiên c a lo t bài nhi uệ ủ ạ ế ầ ầ ủ ạ ề

ph n này M c tiêu c a bài vi t này là gi i thi u ch đ HTML5 m i HTML5 còn cóầ ụ ủ ế ớ ệ ế ộ ớnhi u h n ch là m t b n nâng c p cho HTML4: Đó là cách m i đ truy n thông kề ơ ỉ ộ ả ấ ớ ể ề ỹ thu t s V i ch c năng c a CSS3 và JavaScript, HTML5 mang l i cho các nhàậ ố ớ ứ ủ ạ

Trang 15

phát tri n m i th trong m t gói-gi N u b n s n sàng h p th nh ng gì mà b nể ọ ứ ộ ả ế ạ ẵ ấ ụ ữ ạ

c n t m t lầ ừ ộ ượng l n thông tin HTML5 ngoài thông tin hi n có đ s d ng chungớ ệ ể ử ụ

c a chúng ta, thì b n s gia nh p vào đ i ngũ các nhà phát tri n và các nhà thi t kủ ạ ẽ ậ ộ ể ế ế web đa phương ti n HTML5 gi i không ng ng tăng Ph n đăng ti p theo c a lo tệ ỏ ừ ầ ế ủ ạ bài này s xem xét cách mã hóa và đ nh d ng các bi u m u HTML5.ẽ ị ạ ể ẫ

Ph n 2: Thi t l p các đ u vào ầ ế ậ ầ

T ươ ng tác v i khách truy c p c a b n ớ ậ ủ ạ

Grace Walker, Chuyên gia t v n CNTT, Walker Automated Services ư ấ

Tóm t t: ắ HTML5 ph n ánh nh ng thay đ i to l n theo cách mà bây gi b n đang kinh doanh ả ữ ổ ớ ờ ạ trên web và trong đám mây Bài vi t này là bài th hai trong m t lo t bài b n ph n đ ế ứ ộ ạ ố ầ ượ c thi t k ế ế

đ làm sáng t nh ng thay đ i trong HTML5, b t đ u b ng các th m i và t ch c trang và ể ỏ ữ ổ ắ ầ ằ ẻ ớ ổ ứ cung c p thông tin c p cao v thi t k trang web, vi c t o các bi u m u, vi c s d ng và giá tr ấ ấ ề ế ế ệ ạ ể ẫ ệ ử ụ ị

c a các API; và cu i cùng, các kh năng sáng t o mà Canvas (Khung n n nh) cung c p Ph n ủ ố ả ạ ề ả ấ ầ

th hai này gi i thi u các khái ni m v các nút đi u khi n c a bi u m u HTML5 và đ c p đ n ứ ớ ệ ệ ề ề ể ủ ể ẫ ề ậ ế vai trò c a JavaScript và CSS3 ủ

T t c vi c qu n tr , phân tích d li u, chi n lấ ả ệ ả ị ữ ệ ế ược ti p th , và các ch c năng khácế ị ứ

c a các t ch c m c doanh nghi p đ u quan tr ng Tuy nhiên, ch ng có m t ô c aủ ổ ứ ứ ệ ề ọ ẳ ộ ử

k thu t s thành công nào mà khách hàng ti m năng c a b n có th s d ng —ỹ ậ ố ề ủ ạ ể ử ụ

ho c đặ ược thúc đ y s d ng — các quá trình ban đ u c n thi t cho s phát tri nẩ ử ụ ầ ầ ế ự ể

c a trang web mà thi u đi s trao đ i c a khách truy c p M t tr i nghi m tích c c,ủ ế ự ổ ủ ậ ộ ả ệ ự thân thi n v i ngệ ớ ườ ử ụi s d ng thúc đ y s tẩ ự ương tác c n thi t cho n l c c a b n làầ ế ỗ ự ủ ạ

m t m c tiêu hàng đ u c a t ch c.ộ ụ ầ ủ ổ ứ

Đi m chính c a s tể ủ ự ương tác là các bi u m u c a trang web Chúng t o đi u ki nể ẫ ủ ạ ề ệ trao đ i tổ ương tác v i ngớ ười dùng sao cho các m c tiêu đã thúc đ y vi c xây d ngụ ẩ ệ ự trang web có th để ược nâng lên nh thay đ i c a khách truy c p trang web Cácờ ổ ủ ậ

bi u m u là nhân t chính đ ti p thêm năng lể ẫ ố ể ế ượng cho s tự ương tác gi a các chữ ủ

s h u ho c các đ i lý trang web và nh ng ngở ữ ặ ạ ữ ười dùng trang web, và nh v y,ư ậ chúng c c kỳ quan tr ng cho vi c thi t k và phát tri n m t trang web.ự ọ ệ ế ế ể ộ

Trung tâm c a đi m chính đó đủ ể ược phát hi n ra trong các nút đi u khi n — các nútệ ề ểtròn, các h p ki m tra, các h p văn b n, các nút quay tròn s , và các th tộ ể ộ ả ố ứ ương t ự Các ph n t này c n thi t cho vi c đàm tho i c a ngầ ử ầ ế ệ ạ ủ ười dùng trang web v i trangớweb Nói cách khác, không có các nút đi u khi n ch c năng đ y đ (c hai v ho tề ể ứ ầ ủ ả ề ạ

đ ng "c h c" c a nút đi u khi n và s thích h p c a nút đi u khi n cho nhi m vộ ơ ọ ủ ề ể ự ợ ủ ề ể ệ ụ

c th ), thì không th có đàm tho i, và do đó, không có s trao đ i ti m năng nào.ụ ể ể ạ ự ổ ề

Các t vi t t t thông d ng ừ ế ắ ụ

• API: Giao di n l p trình ng d ngệ ậ ứ ụ

• CSS3: B ng đ nh ki u x p ch ng phiên b n 3ả ị ể ế ồ ả

• HTML5: Ngôn ng đánh d u siêu văn b n phiên b n 5ữ ấ ả ả

• IT: Công ngh thông tin (CNTT)ệ

• UTC: Gi ph i h p qu c tờ ố ợ ố ế

Trang 16

Đi u b t bu c là các m i quan h c a quá trình trao đ i này đề ắ ộ ố ệ ủ ổ ược xem xét c nẩ

th n, bao g m t t c các khía c nh c a s tậ ồ ấ ả ạ ủ ự ương tác gi a khách truy c p trang webữ ậ

và h th ng hi n t i T c đ xác nh n h p l , đ u vào, nh n th c, s chuy nệ ố ệ ạ ố ộ ậ ợ ệ ầ ậ ứ ự ể

hướng, vi c n p các trang, và cách các trang đệ ạ ược thi t l p t t c đ u có tác đ ngế ậ ấ ả ề ộ

đ n quá trình trao đ i Các c i ti n và nâng cao tính xác nh n h p l , cùng v i sế ổ ả ế ậ ợ ệ ớ ự

đa d ng m r ng c a các tùy ch n nút đi u khi n c a bi u m u đạ ở ộ ủ ọ ề ể ủ ể ẫ ược cung c p vàấtính ch t đa phấ ương ti n chung c a các đ c t HTML5, là t t c các yêu t đóngệ ủ ặ ả ấ ả ốgóp cho kh năng c a HTML5 trong vi c bi n m t khách truy c p trang web thànhả ủ ệ ế ộ ậ

m t ngộ ười dùng trang web th c s ự ự

HTML5 là m t công c đ c bi t m nh m đ xác nh n h p l và lòng tin chung vộ ụ ặ ệ ạ ẽ ể ậ ợ ệ ề

đi n toán d a trên web h p lý — m t tài s n an toàn quan tr ng Nó đ c bi t quanệ ự ợ ộ ả ọ ặ ệ

tr ng trong vi c thi t k và phát tri n các trang web nh m m c đích đ thu hút cácọ ệ ế ế ể ằ ụ ểkhách hàng Vì v y, cách s d ng c a nó là c n thi t đ duy trì m t t c đ trao đ iậ ử ụ ủ ầ ế ể ộ ố ộ ổ thu n l i N u b n không th v ch ra các tri n v ng, thì b n đang g p r c r i; n uậ ợ ế ạ ể ạ ể ọ ạ ặ ắ ố ế

b n không th thay đ i các tri n v ng mà b n v ch ra, thì b n ph i h cánh kh nạ ể ổ ể ọ ạ ạ ạ ả ạ ẩ

t v truy n thông và CNTT cũng nh các nhu c u c a m t xã h i toàn c u có tínhố ề ề ư ầ ủ ộ ộ ầ

c nh tranh cao.ạ

Thi t k bi u m u ế ế ể ẫ

Trong HTML5, các bi u m u đã để ẫ ược coi là vi c tân trang l n M t s nhi m v màệ ớ ộ ố ệ ụ

trước đây đòi h i mã hóa JavaScript thì bây gi có th d dàng đỏ ờ ể ễ ược th c hi n màự ệkhông c n nó Ví d bi u m u c a bài vi t này phân tích vi c s d ng b ng d ngầ ụ ể ẫ ủ ế ệ ử ụ ộ ứ ụ HTML5 v các đ i m i bi u m u Bề ổ ớ ể ẫ ước đ u tiên trong quá trình này, t t nhiên, làầ ấ

ho ch đ nh bi u m u.ạ ị ể ẫ

B c c c a ví d bi u m u mà b n s phát tri n đố ụ ủ ụ ể ẫ ạ ẽ ể ược hi n th trong Hình 1 B n sể ị ạ ẽ phát tri n ba vùng cho trang bi u m u này: vùng Header, vùng Form (Bi u m u), vàể ể ẫ ể ẫvùng Footer Vùng Header ch a các tiêu đ và ph đ trang đứ ề ụ ề ược b c trong cácọthẻ<header></header>. dỞ ưới cùng c a trang, vùng Footer có ch a thông tinủ ứ

b n quy n bên trong các thả ề ẻ <footer></footer>. Tôi đã nói v vi c xây d ngề ệ ự

m t vùng Header và m t vùng Footer trong ví d độ ộ ụ ược cung c p trongấ ph n 1ầ c aủ

lo t bài này: N u b n ch a quen v i các thạ ế ạ ư ớ ẻ <header> và <footer>, hãy tham

kh o bài vi t đóả ế

Hình 1 B trí trang bi u m u ố ể ẫ

Trang 17

Cu c th o lu n các bi u m u này t p trung vào b n th : ộ ả ậ ể ẫ ậ ố ẻ

• <form>

• <fieldset>

• <label>

• <input>

xu ng xu t hi n trên các trang web gi ng nh Google Thu c tính ố ấ ệ ố ư ộ novalidate t t xác nh n h p l cho m t ắ ậ ợ ệ ộ

bi u m u, r t có ích trong quá trình th nghi m ể ẫ ấ ử ệ

Thẻ <fieldset> (thi t l p tr ế ậ ườ ng) có ba thu c tính m i là: ộ ớ disable(vô hi u hóa), ệ name (tên), và form

Thu c tính ộ disablelàm cho thẻ <fieldset>không ho t đ ng Thu c tính ạ ộ ộ name đ t tên cho ặ thẻ <fieldset> Giá tr thu c tính ị ộ form là mã đ nh danh (ID) c a bi u m u này hay các bi u m u thu c v ị ủ ể ẫ ể ẫ ộ ề thẻ <fieldset> Trong HTML5, m t th ộ ẻ <fieldset>có th n m ngoài bi u m u này hay các bi u m u ể ằ ể ẫ ể ẫ

mà nó thu c v Khi m t th ộ ề ộ ẻ <fieldset>đ ượ c đ t bên ngoài c a bi u m u, b n ph i thi t l p thu c ặ ủ ể ẫ ạ ả ế ậ ộ tính form c a th ủ ẻ <fieldset>đ cho th ể ẻ <fieldset>có th đ ể ượ c liên k t v i bi u m u ho c các bi u ế ớ ể ẫ ặ ể

m u đúng ẫ

Thẻ <label>(nhãn), đ nh nghĩa m t s phân lo i cho m t ph n t đ u vào, có m t thu c tính m i là: ị ộ ự ạ ộ ầ ử ầ ộ ộ ớ form

Giá tr thu c tính ị ộ form là ID c a bi u m u này hay các bi u m u mà th ủ ể ẫ ể ẫ ẻ <label>thu c v ộ ề Thẻ <label>cũng có th đ ể ượ c đ t bên ngoài c a bi u m u, vì v y đây thu c tính ặ ở ủ ể ẫ ậ ở ộ form cũng đ ượ c s ử

d ng đ liên k t ụ ể ế <label> v i bi u m u thích h p ớ ể ẫ ợ

Thẻ <input> (đ u vào) có m t s ki u m i cũng nh các thu c tính nâng cao kh năng s d ng c a bi u ầ ộ ố ể ớ ư ộ ả ử ụ ủ ể

m u HTML5 đã gi i thi u m t s các ki u đ u vào m i đ ẫ ớ ệ ộ ố ể ầ ớ ượ c thi t k đ t ch c và phân lo i d li u, sao chép ế ế ể ổ ứ ạ ữ ệ toàn b cách ti p c n ng nghĩa c a HTML5 Câu châm ngôn cũ là bi u m u nên th c hi n theo ch c năng là ộ ế ậ ữ ủ ể ẫ ự ệ ứ

m t cách ti p c n thích h p đ mô t các ch c năng c a các bi u m u HTML5 ộ ế ậ ợ ể ả ứ ủ ể ẫ

Trong HTML5, tr ườ ng<input> c a bi u m u có th n m ngoài các th ủ ể ẫ ể ằ ẻ <form> Thu c tính ộ form xác đ nh ị

bi u m u này hay các bi u m u mà tr ể ẫ ể ẫ ườ ng đ u vào thu c v Nó cũng xác đ nh bi u m u mà nó thu c v b ng ầ ộ ề ị ể ẫ ộ ề ằ cách đ a ra ID c a bi u m u B ng 1 cho th y các ki u ư ủ ể ẫ ả ấ ể <input> m i ớ

Trang 18

b n ghi âm nh ng b n nh c c đi n Đây là trang b n s t o ra.ả ữ ả ạ ổ ể ạ ẽ ạ

Hình 2 Bi u m u Đi m âm nh c c đi n ể ẫ ể ạ ổ ể

Trang 20

C u t o c a bi u m u này b t đ u b ng thấ ạ ủ ể ẫ ắ ầ ằ ẻ <form>. Trong ví d này, b n s d ngụ ạ ử ụ thu c tínhộ autocomplete m i, đớ ược đ a ra dư ưới đây:

M t hành đ ng JavaScript cũng độ ộ ược ch a trong thứ ẻ <form>, mà tôi s th o lu nẽ ả ậ trong ph n sau.ầ

Thẻ <form> có b n thố ẻ <fieldset>, được phác ra tr c quan b i các vùng màuự ởxám trong Hình 2: Tên, đi n tho i, đ a ch Email, và ngày Thệ ạ ị ỉ ẻ <fieldset> t oạ nhóm th nh n i dung trong bi u m u Chúng ta hãy xem xét t ngẻ ư ộ ể ẫ ừ thẻ <fieldset> riêng bi t.ệ

Th ẻ <fieldset> đ u tiên ầ

Thẻ <fieldset> đ u tiên ch a thông tin khách hàng (xem Hình 3) Nó có m tầ ứ ộ

trườ Name, m t trng ộ ườ Telephone, m t trng ộ ườ Email address, và m tng ộ

trườ Date Trng ườ Name có thu c tínhng ộ autofocus, cho phép b n b t đ u nh pạ ắ ầ ậ văn b n vào mà không c n ph i nh n vào trả ầ ả ấ ường này

Thẻ <fieldset> đ u tiên ch a m t thầ ứ ộ ẻ <legend> (ghi chú), m t thộ ẻ <label>, và

m t thộ ẻ <input>, nh trong Li t kê 1 Trư ệ ường Name, là ki uể text, có ba thu cộ tính <input> m i là:ớ placeholder, autofocus, và required

Li t kê 1 Tr ệ ườ ng Name

<legend> Customer Info </legend>

<p>

<label>Name:

<input id="name" name="name" type="text" placeholder="Enter your name"

autofocus required size="50">

Trang 21

Thu c tínhộ placeholder đ t văn b n vào gi a các d u ngo c kép bên trongặ ả ữ ấ ặ

trường này dướ ại d ng văn b n màu xám nh t Thu c tínhả ạ ộ placeholder s nói choẽ

người dùng bi t trế ường này ph i ch a nh ng gì và đả ứ ữ ược hi n th th nào khi trể ị ế ườ ngnày r ng Tuy nhiên, vì các trỗ ường Name cũng có thu c tínhộ autofocus được thi tế

l p, nên khi b n nh p vào trang này, b n không th th y văn b n th c s L u ýậ ạ ậ ạ ể ấ ả ự ự ư

r ng trong Hình 3, trằ ường Name không hi n th gi ch , và nó để ị ữ ỗ ược đóng khungtrong ph n đánh d u màu vàng N u b n di chuy n đ n m t trầ ấ ế ạ ể ế ộ ường khác mà không

nh p d li u, thì văn b n gi ch s đậ ữ ệ ả ữ ỗ ẽ ược hi n th Khi b n s d ng thu cể ị ạ ử ụ ộ tính autofocus v i thu c tínhớ ộ placeholder, văn b n gi ch s bi n m t doả ữ ỗ ẽ ế ấtrong tâm được được đ t vào trặ ường này

Thu c tínhộ required t o đi u ki n thu n l i cho vi c đ t m t trạ ề ệ ậ ợ ệ ặ ộ ường b t bu c nhắ ộ ư

là m t đi u ki n tiên quy t đ trình lên bi u m u Đi u này là h p l v i các trộ ề ệ ế ể ể ẫ ề ợ ệ ớ ườ ngvăn b n, tìm ki m, URL, đi n tho i, email, m t kh u, các nút ch n ngày, s , h pả ế ệ ạ ậ ẩ ọ ố ộ

ki m tra, nút tròn, và các trể ường t p.ệ

Trường Telephone, là ki uể tel, có các thu c tínhộ required, placeholder, size,

và pattern, nh trong Li t kê 2 Ki uư ệ ể tel là m t trộ ường văn b n đả ược thi t k đế ế ể

ch a các s đi n tho i Trong ví d này, trứ ố ệ ạ ụ ường Telephone có s h n ch theo m uự ạ ế ẫ

c n ph i đầ ả ược tuân th nghiêm ng t, vì h th ng s không cho phép b n trình lênủ ặ ệ ố ẽ ạcho đ n khi b n s d ng các m u ký t đúng Trế ạ ử ụ ẫ ự ường placeholder dùng cho đi nệ tho i thi t l p m u d a vào b n dùng đ u vào nàoạ ế ậ ẫ ự ạ ầ

Trường pattern mô ph ng các ch c năng c a m t bi u th c chính quy (regex)ỏ ứ ủ ộ ể ứJavaScript truy n th ng Đ u vào ph i kh p v i c u trúc m u c a bi u th c chínhề ố ầ ả ớ ớ ấ ẫ ủ ể ứquy được đ nh nghĩa trị ước khi nó có th để ược xác nh n h p l Trậ ợ ệ ường này làm

vi c v i các ki uệ ớ ể text, search, url, telephone, email, và password.

Li t kê 2 Tr ệ ườ ng Telephone

<p>

<label>Telephone:

<input id="tel" name="telephone" type="tel" placeholder="Pattern: 1-234-567-8910"

required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))"> </label>

</p>

Trường đ a ch Email là ki uị ỉ ể email, nh trong Li t kê 3 Đ a ch email đư ệ ị ỉ ược xác

nh n h p l t đ ng mà không c n ph i s d ng m t m u: Xác nh n h p l là m tậ ợ ệ ự ộ ầ ả ử ụ ộ ẫ ậ ợ ệ ộ

ph n c a HTML5 N u không trình bày đ a ch email này theo đ nh d ng đúng, thìầ ủ ế ị ỉ ị ạ

bi u m u không th để ẫ ể ược trình lên

Li t kê 3 Tr ệ ườ ng đ a ch Email ị ỉ

M c nh p cu i cùng trong thụ ậ ố ẻ <fieldset> này là trường Date Ki uể date cung

c p m t nút ch n l ch đ ch n ngày trong trình duy t Opera nh ng t o ra m t nútấ ộ ọ ị ể ọ ệ ư ạ ộquay tròn trong Google Chrome, nh đã th y trongư ấ Hình 3 Hình 4 cho th y bi uấ ể

Trang 22

di n Opera c a trang web này có nút ch n trễ ủ ọ ườ Date đng ược hi n th L u ý r ngể ị ư ằ trong Opera, các góc thi t l p trế ậ ường này không được làm tròn, m c dù đã s d ngặ ử ụ cùng m t b ng đ nh ki u đ làm tròn các góc nh trong Chrome.ộ ả ị ể ể ư

Hình 4 Tr ườ ng Date

Li t kê 4 cho th y đo n mã đệ ấ ạ ược s d ng đ t o nút ch n ngày.ử ụ ể ạ ọ

Li t kê 4 Tr ệ ườ ng Date

• time. Ch n th i gian (gi và phút)ọ ờ ờ

• datetime. Ch n th i gian, ngày, tháng, và năm (th i gian UTC)ọ ờ ờ

• datetime-local. Ch n th i gian, ngày, tháng, và năm (th i gian đ aọ ờ ờ ị

phương)

Trang 23

Th ẻ <fieldset> th hai ứ

Thẻ <fieldset> th hai ch a m t thứ ứ ộ ẻ <input> có m t thu c tínhộ ộ list và m tộ thẻ <datalist>. Thu c tínhộ list quy đ nh m tị ộ<datalist> c a trủ ường đ u vào.ầThẻ <datalist> cung c p m t danh sách các tùy ch n trấ ộ ọ ường đ u vào Thu cầ ộ

ki uể <input> sau: text, search, url, telephone, email, date

pickers, number, range, và color.

Thẻ <datalist> được hi n th trong m t danh sách th xu ng, nh trong Hình 5.ể ị ộ ả ố ư

nh này đ c l y trong Opera Trong Chrome, danh sách này đ c hi n th nh

Thẻ <fieldset> th ba hi n th m t danh sách các nhà so n nh c, theo sau làứ ể ị ộ ạ ạ

m t trộ ường s ch rõ có bao nhiêu tác ph m có s n v i m i nhà so n nh c đố ỉ ẩ ẵ ớ ỗ ạ ạ ược li tệ

kê Hình 6 cho th y ph n này.ấ ầ

Hình 6 Các tr ườ ng Composers (Các nhà so n nh c) ạ ạ

Trang 24

Ví d , B ch có năm tác ph m, và Beethoven có 10 tác ph m Li t kê 6 cho th y cácụ ạ ẩ ẩ ệ ấgiá tr t i đa cho m i nhà so n nh c Trị ố ỗ ạ ạ ường s s không ch p nh n nhi u h n giáố ẽ ấ ậ ề ơ

tr t i đa khi b n trình lên bi u m u này Khi đị ố ạ ể ẫ ược trình lên, trường này đáp ng v iứ ớ các giá tr ngoài d i, không đúng b ng cách nh c b n s a l i đ u vào cho nó phùị ả ằ ắ ạ ử ạ ầ

h p v i các gi i h n s ch p nh n đợ ớ ớ ạ ố ấ ậ ược c a trủ ường này

Ki uể number t o ra m t trạ ộ ường nút quay tròn cho đ u vào S d ng thu cầ ử ụ ộ tính min, max, và step được s d ng v i ki u s ử ụ ớ ể ố number. Giá tr bị ước m c đ nhặ ị

là 1 Các thu c tínhộ min, max, và step được s d ng v i các ràng bu c s , ph mử ụ ớ ộ ố ạ

vi, ho c đ u vào nút ch n ngày Thu c tínhặ ầ ọ ộ max xác đ nh giá tr t i đa cho phép đ iị ị ố ố

v i trớ ường đ u vào Thu c tínhầ ộ min xác đ nh giá tr t i thi u cho phép đ i v i trị ị ố ể ố ớ ườ ng

đ u vào Thu c tínhầ ộ step xác đ nh bị ước tăng h p l ợ ệ

Li t kê 6 Các tr ệ ườ ng Composers

Trang 25

Th ẻ <fieldset> th t ứ ư

Thẻ <fieldset> th t ch a ki uứ ư ứ ể <input> file và thu c tínhộ multiple, như trong Hình 7 Thu c tínhộ multiple quy đ nh r ng m t trị ằ ộ ường đ u vào có th ch nầ ể ọ nhi u giá tr t m t danh sách d li u ho c danh sách t p Trong ví d này, m tề ị ừ ộ ữ ệ ặ ệ ụ ộ

người dùng có th ch n nhi u t p đ t i lên.ể ọ ề ệ ể ả

Hình 7 Tr ườ ng Upload

Mã cho ki u t p và thu c tínhể ệ ộ multiple được hi n th trong Li t kê 7.ể ị ệ

Li t kê 7 Tr ệ ườ ng Upload (T i lên) ả

<legend> Upload file(s) </legend>

<p>Upload one of your orchestra's file(s) for inclusion in our library</p>

Nút Submit (Trình lên) s d ng các thu c tínhử ụ ộ height (chi u cao) vàề width (chi uề

r ng), nh trong Li t kê 8 B n s d ng các thu c tính này đ thi t l p chi u cao vàộ ư ệ ạ ử ụ ộ ể ế ậ ềchi u r ng c a ki u đ u vàoề ộ ủ ể ầ image Khi b n thi t l p các thu c tính này, vùngạ ế ậ ộkhông gian c a trang web dành cho hình nh không b thay đ i do b các ràng bu củ ả ị ổ ị ộ

v các kích thề ước chi u r ng và chi u cao đ t s n, đ làm cho vi c n p trang dề ộ ề ặ ẵ ể ệ ạ ễ dàng nh m nâng cao hi u qu hi n th trang.ằ ệ ả ể ị

Trang 26

c có giá tr Sau đây là các t p mã JavaScript và CSS3 đụ ị ệ ược s d ng đ t o cácử ụ ể ạ

bi u m u ví d ể ẫ ụ

Mã JavaScript là m t h p c nh báo đ n gi n tr v ba trộ ộ ả ơ ả ả ề ường c n thi t, nh trongầ ế ư

Li t kê 9 M c dù đo n mã JavaScript đệ ặ ạ ược s d ng đây ch có m t dòng, nh ngử ụ ở ỉ ộ ữ

nó đã được đ t trong m t t p JavaScript riêng bi t, sau đây là các th c hành t tặ ộ ệ ệ ự ố

Li t kê 10 cho th y mã CSS3 đ nh d ng bi u m u ví d Thôngệ ấ ị ạ ể ẫ ụ

tin <header> và <footer> không có đây.ở

m nh m khác th ạ ẽ ườ ng thích h p cho nhi m v này Nh ng ng ợ ệ ụ ữ ườ ượ i đ c chu n b cho t ẩ ị ươ ng lai — ngay lúc này

— s đ ẽ ượ c h ưở ng l i; còn nh ng ng ợ ữ ườ i không đ ượ c chu n b s ph i ch u r i ro nghiêm tr ng b i t c đ phát ẩ ị ẽ ả ị ủ ọ ở ố ộ tri n và các yêu c u c a xã h i toàn c u, trung tâm m ng, m t th gi i-web ể ầ ủ ộ ầ ạ ộ ế ớ

Trang 27

Ph n 3: S c m nh c a các API HTML5 ầ ứ ạ ủ

Qu n lý truy n thông ả ề

Grace Walker, Chuyên gia t v n CNTT, Walker Automated Services ư ấ

Tóm t t: ắ HTML5 ph n ánh nh ng thay đ i to l n theo cách mà bây gi b n đang kinh doanh ả ữ ổ ớ ờ ạ trên web và trong đám mây Bài vi t này là bài th ba trong m t lo t bài b n ph n đ ế ứ ộ ạ ố ầ ượ c thi t k ế ế

đ làm sáng t nh ng thay đ i trong HTML5, b t đ u b ng các th m i và t ch c trang và ể ỏ ữ ổ ắ ầ ằ ẻ ớ ổ ứ cung c p thông tin c p cao v thi t k trang web, vi c t o các m u bi u, vi c s d ng và giá tr ấ ấ ề ế ế ệ ạ ẫ ể ệ ử ụ ị

c a các API; và cu i cùng, các kh năng sáng t o mà Canvas (Khung n n nh) cung c p Ph n ủ ố ả ạ ề ả ấ ầ đăng này gi i thi u các API HTML5, b ng cách s d ng m t trang m u đ gi i thích các hàm ớ ệ ằ ử ụ ộ ẫ ể ả

V y, m t API là gì? ậ ộ

M tộ giao di n l p trình ng d ng ệ ậ ứ ụ (API) là m t b s u t p các l nh và các tiêu chu nộ ộ ư ậ ệ ẩ

l p trình đ truy c p m t ng d ng ph n m m V i API, b n có th thi t k các s nậ ể ậ ộ ứ ụ ầ ề ớ ạ ể ế ế ả

ph m đẩ ược h tr b i d ch v mà API cung c p.ỗ ợ ở ị ụ ấ

HTML5 có m t s API m i Ví d :ộ ố ớ ụ

• M t API v 2D độ ẽ ược dùng v i ph n t canvas m i đ bi u di n các bi u đớ ầ ử ớ ể ể ễ ể ồ

ho c hình nh tr c quan khác.ặ ả ự

• M t c c u b nh đ m API đ h tr các ng d ng web không n i m ng.ộ ơ ấ ộ ớ ệ ể ỗ ợ ứ ụ ố ạ

• M t API đ phát video và âm thanh độ ể ược dùng v i các ph n t video và âmớ ầ ửthanh m i.ớ

• M t API l ch s làm cho có kh năng truy c p l ch s duy t web và cho phépộ ị ử ả ậ ị ử ệcác trang web thêm vào nó

• M t API kéo-và-th đ s d ng v i các thu c tínhộ ả ể ử ụ ớ ộ draggable (có kh năngảkéo)

• M t API ch nh s a đ s d ng v i thu c tínhộ ỉ ử ể ử ụ ớ ộ contenteditable (có khả năng ch nh s a n i dung).ỉ ử ộ

• L u tr phía máy khách v i các API JavaScript cho các c p giá tr -khóa vàư ữ ớ ặ ịcác c s d li u SQL nhúng.ơ ở ữ ệ

Bài vi t này t p trung vào hai API: Geolocation (Đ nh v đ a lý) và Web Worker (Trìnhế ậ ị ị ịlàm vi c trên n n Web) Đ u tiên, bài vi t phân tích chính các API đó, r i, b n t oệ ề ầ ế ồ ạ ạ

m t trang có ch a c hai API này.ộ ứ ả

Kinh doanh kh p m i n i: Đ nh v đ a lý ắ ọ ơ ị ị ị

B n s d ng Geolocation API (API Đ nh v đ a lý) đ xác đ nh và chia s các v tríạ ử ụ ị ị ị ể ị ẻ ị

đ a lý API này tr v các t a đ kinh đ và vĩ đ — thông tin mà các doanh nghi pị ả ề ọ ộ ộ ộ ệ

có th s d ng đ cung c p d ch v trong vùng g n đúng t a đ Nh ng d ch vể ử ụ ể ấ ị ụ ầ ọ ộ ữ ị ụ này thường được g i làọ các d ch v d a vào v trí ị ụ ự ị (LBS)

LBS đ c p đ n các ngu n d li u đ a lý đề ậ ế ồ ữ ệ ị ược dùng đ xác đ nh v trí v t lý c aể ị ị ậ ủ thi t b đang b theo dõi và, do đó, con ngế ị ị ười có liên quan đ n v trí đó Ch c năngế ị ứnày cung c p cho các bên quan tâm c h i đ tấ ơ ộ ể ương tác v i cá nhân đó d a vào thớ ự ị

trường v i m t s đi m trung tâm-đ nh v đ a lý quan tâm.ớ ộ ố ể ị ị ị

Kinh doanh th c s liên quan đ n vi c t o ra ch t lự ự ế ệ ạ ấ ượng, ti n ích, và giá tr cho cácệ ịkhách hàng, trong khi đ ng th i t o ra l i ích kinh t và tài chính cho các bên liênồ ờ ạ ợ ế

Trang 28

quan, các ch n , các c đông, các nhân viên, và các nhà cung c p LBS có h tr -ủ ợ ổ ấ ỗ ợ

Đ nh v đ a lý giúp vi c bám sát và theo dõi m t gói b u ki n hay m t ngị ị ị ệ ộ ư ệ ộ ười dễ dàng h n khi s d ng m t thi t b không có trình duy t ho c có trình duy t Vơ ử ụ ộ ế ị ệ ặ ệ ề

thương m i, vi c đ nh v đ a lý có liên quan đ n t t c vi c s d ng các tài s n đ aạ ệ ị ị ị ế ấ ả ệ ử ụ ả ị

lý đ xác đ nh n i m t ngể ị ơ ộ ười nào đó ho c m t cái gì đó có v trí đó, r i bán t pặ ộ ở ị ồ ậ thông tin c th đó cho b t kỳ ai mu n s d ng nó cho các m c đích xã h i, thụ ể ấ ố ử ụ ụ ộ ươ ng

m i, ho c các m c đích khác, d a vào s cho phép h p pháp t ch s h u thôngạ ặ ụ ự ự ợ ừ ủ ở ữtin đ làm nh v y.ể ư ậ

Đ nh v đ a lý ho t đ ng nh th nào ị ị ị ạ ộ ư ế

Geolocation API (API Đ nh v đ a lý) đị ị ị ược d a vào m t đ c tính c a đ iự ộ ặ ủ ố

tượ ngnavigator chung: navigator.geolocation Đ iố tượ ngJavaScript navigator cung c p thông tin có ích v trình duy t và h th ng c aấ ề ệ ệ ố ủ khách truy c p Vi c đ nh v đ a lý có th xác đ nh vĩ đ và kinh đ b ng các đ a chậ ệ ị ị ị ể ị ộ ộ ằ ị ỉ

IP, c s d li u d a trên-web, các k t n i m ng không dây, và công ngh phép đoơ ở ữ ệ ự ế ố ạ ệtam giác ho c GPS (H th ng đ nh v toàn c u) C n l u ý r ng đ chính xác c aặ ệ ố ị ị ầ ầ ư ằ ộ ủ thông tin đ nh v đ a lý đị ị ị ược cung c p khác nhau d a trên các phấ ự ương ti n thu nh nệ ậ thông tin Đôi khi, và m t s đ a đi m, b n có th không có kh năng nh n đở ộ ố ị ể ạ ể ả ậ ượ c

Phương th cứ getCurrentPosition() l y ra v trí hi n t i c a ngấ ị ệ ạ ủ ười dùng, nh ngư

ch m t l n Khi đỉ ộ ầ ược m t k ch b n l nh g i, phộ ị ả ệ ọ ương th c này c g ng thu nh n vứ ố ắ ậ ị trí hi n t i c a thi t b l u tr theo cách không đ ng b ệ ạ ủ ế ị ư ữ ồ ộ Truy n thông không đ ng ề ồ

bộ có nghĩa là ngườ ửi g i và người nh n không đ ng th i đậ ồ ờ ược tham gia vào truy nề thông S d ng truy n thông không đ ng b cho phép trình duy t ti p t c các ho tử ụ ề ồ ộ ệ ế ụ ạ

đ ng khác sao cho nó không ph i ch đ i m t đáp ng t th c th đang thu nh n.ộ ả ờ ợ ộ ứ ừ ự ể ậ

hi n t i c a thi t b l u tr theo cu c g i l i ệ ạ ủ ế ị ư ữ ộ ọ ạ geolocationSuccess v i m t đ iớ ộ ố

tượ ngPosition làm tham s N u có m t l i, cu c g iố ế ộ ỗ ộ ọ

l iạ geolocationError được g i ra v i m t đ i tọ ớ ộ ố ượ ng PositionError. B n cóạ

Định dạng
Số trang	56
Dung lượng	840,91 KB