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

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ộ 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ạ ề ệ ự ể ủ ứ ụ ữ ệ ớ 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úệ ể ế ậ ế ố ụ ữ ứ ụ ư và máy ch .ủ • L y ra d li u đã l u tr t t h n.ấ ữ ệ ư ữ ố ơ • C i thi n t c đ n p và l u trang.ả ệ ố ộ ạ ư • H tr cho CSS3 đ qu n lý giao di n ng i dùng đ h a (GUI), có nghĩa làỗ ợ ể ả ệ ườ ồ ọ HTML5 có th đ c đ nh h ng n i dung.ể ượ ị ướ ộ • C i thi n x lý bi u m u trình duy t.ả ệ ử ể ẫ ệ • M t API c s d li u d a trên-SQL cho phép l u tr c c b , phía máyộ ơ ở ữ ệ ự ư ữ ụ ộ khách • 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óể ể ự ệ ề ệ ệ ạ ộ 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.ọ L p k ho ch trangậ ế ạ B n s t o m t trang web đ n gi n. Trong quá trình này, tôi th o lu n m t s trongạ ẽ ạ ộ ơ ả ả ậ ộ ố các th m i đã đ c đ a vào trong HTML5. Đ t o hi u qu nh m t trang webẻ ớ ượ ư ể ạ ệ ả ư ộ hi u qu , b n ph i phát tri n m t k ho ch đ xem xét t t c các thành ph n b nệ ả ạ ả ể ộ ế ạ ể ấ ả ầ ạ mu n ch t o.ố ế ạ 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ề ặ ủ ạ ể ấ ạ 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> <header> <h1>Heading Text</h1> <p> Text or images can be included here</p> <p> Logos are frequently placed here too</p> </header> Thẻ <header> cũng có th ch a m t thể ứ ộ ẻ <hgroup>, nh trong Li t kê 2.ư ệ Thẻ <hgroup> t o nhóm các tiêu đ v i nhau, b ng cách s d ng các m c tiêuạ ề ớ ằ ử ụ ứ đề <h1> đ nế <h6> đ c hi n th đây có m t tiêu đ chính và m t ph đ .ượ ể ị ở ộ ề ộ ụ ề Li t kê 2. Ví d th ệ ụ ẻ <hgroup> <header> <hgroup> <h1>Main Heading</h1> <h2>Sub-heading </h2> </hgroup> <p> Text or images can be included here</p> </header> Vùng Navigation 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="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> 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> <article> <section> Content </section> <section> Content </section> </article> <section> <article> Content </article> <article> Content </article> </section> Các ph n t nhầ ử ả C hai thả ẻ <section> và thẻ <article> cũng nh thư ẻ <header> và thẻ <footer> có th ch a thể ứ ẻ <figure>. B n s d ng th này đ ch a các nh,ạ ử ụ ẻ ể ứ ả các s đ , và các nh ch p.ơ ồ ả ụ 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> <figure> <img src="/figure.jpg" width="304" height="228" alt="Picture"> <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> <audio src="MyFirstMusic.ogg" controls autoplay loop> 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útả ặ ả ẽ ả ượ nà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> <video src="MyFirstMovie.ogg" controls="controls"> 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> <audio> <source src="/music/good_enough.wma" type="audio/x-ms-wma"> <source src="/music/good_enough.mp3" type="audio/mpeg"> <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> <embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" /> 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ộ ể ượ ạ ỏ ả ưở ế ượ ề đ t b i bài vi t, ph n, ho c trang có ch a nó.ạ ở ế ầ ặ ứ Li t kê 10 đ a ra m t ví d v cách s d ng thệ ư ộ ụ ề ử ụ ẻ <aside>. Li t kê 10. Ví d th ệ ụ ẻ <aside> <p>My family and I visited Euro Disney last year.</p> <aside> <h4>Disney in France</h4> <p>Besides Euro Disney, there is a Disneyland in California.</p> </aside> Vùng Footer 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.ề ặ ọ ư ệ Li t kê 11. Ví d th ệ ụ ẻ <footer> <footer> <p>Copyright 2011 Acme United. All rights reserved.</p> </footer> Xây d ng trangự Bây gi b n bi t các th c b n c n thi t đ t o ra m t trang HTML5, chúng ta hãy b t đ uờ ạ ế ẻ ơ ả ầ ế ể ạ ộ ắ ầ xây d ng trang web c a b n. B n s xây d ng m t trang web cho Acme United. Trangự ủ ạ ạ ẽ ự ộ hoàn thành đ c hi n th trong Hình 2.ượ ể ị 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ể ỉ là html. Thẻ <html> ch a t t c các ph n t HTML khác, tr thứ ấ ả ầ ử ừ ẻ <!doctype>. T t c cácấ ả ph n t khác ph i đ c l ng vào gi a thầ ử ả ượ ồ ữ ẻ<html> và </html>. Xem Li t kê 12.ệ Li t kê 12. Ví d th <!doctype>ệ ụ ẻ <!doctype html> <html lang="en"> Sau khi ch raỉ html và ngôn ng ti ng Anh, b n có ph n tữ ế ạ ầ ử <head>, có th ch aể ứ các k ch b n l nh, thông tin h tr trình duy t, các liên k t b ng đ nh ki u, siêuị ả ệ ỗ ợ ệ ế ả ị ể thông tin, và các hàm kh i t o khác. B n có th s d ng các th sau trongở ạ ạ ể ử ụ ẻ ph nầ head: • <base> • <link> • <meta> • <script> • <style> • <title> Thẻ <title> (đ u đ ) là n i gi đ u đ hi n t i c a tài li u và là m t ph n t c aầ ề ơ ữ ầ ề ệ ạ ủ ệ ộ ầ ử ủ ph nầ <head> c n thi t. Đó là đ u đ mà b n nhìn th y phía trên cùng c a trìnhầ ế ầ ề ạ ấ ở ủ 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> <link rel="stylesheet" href="main-stylesheet.css" /> </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> <body > <header> <hgroup> <h1>Acme United</h1> <h2>A Simple HTML5 Example</h2> </hgroup> </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.ụ Li t kê 15. ví d CSS3 #1ệ ụ * { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 800px; margin: 0em auto; } header h1 { font-size: 50px; margin: 0px; color: #006; } header h2 { font-size: 15px; margin: 0px; color: #99f; font-style: italic; } Li t kê 16 hi n th thệ ể ị ẻ <nav>, đ c thi t k đ x lý chuy n h ng trang webượ ế ế ể ử ể ướ chí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 Các quy tắc cơ bản của 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... 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 của biểu mẫu có thể nằm ngoài các thẻ 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... 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... Các quy tắc cơ bản của HTML5, 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. .. ế để 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à 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... Worker('worker.js'); Các web worker chia sẻ Các web worker chia sẻ, giống như các worker chuyên dụng, không th ể truy c ập vào DOM và chỉ có quyền truy cập hạn chế vào các đặc tính c ửa s ổ Các web worker chia sẻ chỉ có thể truyền thông với các web worker chia s ẻ khác c ủa cùng một miền Các worker này được tạo ra bằng cách chuyển m ột tên JavaScript t ới một cá thể worker chia sẻ mới Các kịch bản lệnh trang... ứ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... đó, 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ế Đ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... 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à 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à . đó đ 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. 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. ộ. 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ủ