Hướng dẫn này thừa nhận một số kinh nghiệm cơ bản với HTML, CSS, và JavaScript. Nó cho rằng bạn đã biết rõ một phần tử hoặc thẻ HTML là gì, một thuộc tính có nghĩa là gì, cú pháp cơ bản của ngôn ngữ đánh dấu HTML, cấu trúc chung của một trang Web, và v.v. Về CSS, hướng dẫn này cho rằng bạn đã quen với các bộ chọn dựa trên phần tử, lớp và mã định danh (ID), cú pháp của một đặc tính CSS, và cách bao gồm CSS trong các trang Web của bạn bằng cách sử dụng các bảng định tuyến nội tuyến hoặc bên ngoài. Cuối cùng, hướng dẫn này cũng giả định rằng bạn có một số kiến thức làm việc của JavaScript, chẳng hạn như biến, hàm, câu lệnh if và vòng lặp là gì, cũng như cách đưa mã JavaScript vào các trang Web của bạn. Nếu bạn cảm thấy rằng bạn cần phải xem lại bất kỳ một trong các công nghệ này trước khi bạn bắt đầu, hãy nhảy qua phần đầu đến phần Tài nguyên với một số hướng dẫn và các bài viết có ích sẽ giúp bạn nhanh chóng nắm được những kiến thức cơ bản về phát triển HTML, CSS, và JavaScript.
Trên mười năm qua hay cũng chừng ấy, các khái niệm như Web 2.0, Rich Internet Applications (RIA - Các ứng dụng Internet phong phú), và Semantic Web (Web ngữ nghĩa) tất cả đã đẩy HTML, CSS, và JavaScript đến và vượt quá các giới hạn của chúng, thường dựa vào các trình cắm thêm chẳng hạn như Adobe® Flash để thúc đẩy các thành phần như video và âm thanh, cũng như các ứng dụng tương tác và đồ họa ở mức độ cao. Khung công tác phát triển Adobe Flex, nền tảng Silverlight của, Microsoft® và JavaFX tất cả đều quan tâm chu đáo đến sự hỗ trợ mà ở đó các điểm yếu của HTML làm cho các nhà phát triển thực hiện rất khó khăn. Tuy nhiên, với HTML5, ngôn ngữ đánh dấu đang gây ấn tượng trở lại, với sự hỗ trợ đa phương tiện đầy đủ, lưu trữ cục bộ và sự hỗ trợ ứng dụng không nối mạng, API vẽ 2D nguyên gốc, và một loạt của các API phát triển ứng dụng mới, tất cả được đưa ra với mục đích chứng tỏ rằng HTML, CSS, và JavaScript có thể cung cấp đầu vào phong phú cho các trang Web và các ứng dụng của bạn.
Nhiều người coi HTML5 là một trong những công nghệ mới quan trọng nhất được dự kiến xuất hiện vào năm 2010, và đã có một số cuốn sách được viết về đề tài này, một số trong đó được dự kiến xuất bản sớm vào tháng Ba năm nay. Trong nhiều năm, Web đã dựa vào các trình cắm thêm bên ngoài để phân phối các tính năng mà trình duyệt Web vốn không thể hỗ trợ được, cụ thể là về vẽ 2D, hình ảnh động, và đa phương tiện. Các phiên bản mới nhất của đặc tả HTML và CSS đều nhằm mục đích loại bỏ yêu cầu phải có các thành phần trình duyệt bổ sung này để tạo điều kiện thuận lợi cho các tính năng như vậy, cũng như làm giảm số lượng mã JavaScript cần thiết (hoặc loại bỏ hoàn toàn yêu cầu phải có mã JavaScript, trong một số trường hợp) cho những tính năng ít quan trọng như là kéo và thả hàng, phân chia hàng, và nhiều hơn nữa. Hãy làm theo hướng dẫn này để tìm hiểu cách lợi dụng HTML5.
HTML5 là một đặc tả tương đối mới mẻ, và kết quả là, sự hỗ trợ của trình duyệt khá hạn chế (tại thời điểm viết bài này). Mã được trình bày trong hướng dẫn này được xây dựng càng tương thích giữa các trình duyệt với nhau càng tốt, nhưng có một số tính năng sẽ không hoạt động trong tất cả các trình duyệt. Bất kỳ tính năng nào hiện là riêng cho trình duyệt sẽ được xác định rõ trong hướng dẫn này. Để đảm bảo rằng bạn có thể trải nghiệm tất cả các tính năng mới này, điều quan trọng là bạn nên cài đặt các phiên bản mới nhất của các trình duyệt Web sau đây trên hệ thống của bạn khi đang phát triển các ứng dụng HTML5 và CSS3:
Bạn không cần bất kỳ phần mềm cụ thể nào để viết mã HTML và CSS; trình soạn thảo văn bản cơ bản bất kỳ sẽ làm (chẳng hạn như Notepad, vi, emacs, và v.v..). Trong hướng dẫn này, giả định rằng mã nguồn được lưu trữ trong một thư mục trên máy tính cục bộ của bạn — bạn không cần phải sử dụng một máy chủ Web hoặc tải lên các tệp vào một dịch vụ lưu trữ trên máy chủ Web.
Các tính năng mới trong HTML5Trong phần này, bạn sẽ khám phá một số trong các tính năng mới quan trọng mà HTML5 cần phải cung cấp. Trước tiên, bạn sẽ tìm hiểu về các phần tử ngữ nghĩa mới nhằm mục đích cung cấp nghĩa cho các phần khác nhau của một trang Web hiện đại: các tiêu đề (header), các chân trang (footer), các thanh chuyển hướng, các thanh phụ, và v.v.. Tiếp theo, bạn sẽ tìm hiểu về phần tử <canvas> và các JavaScript API vẽ 2D mới quan trọng mà bạn có thể sử dụng để tạo hình dạng, văn bản, các hình ảnh động, các chuyển cảnh, và nhiều hơn nữa. Tiếp theo, bạn sẽ thấy cách các phần tử <audio> và <video> mới dự kiến thay thế sự phụ thuộc hiện tại của trang Web vào Flash như một nền tảng phân phối đa phương tiện. Tiếp nữa, bạn sẽ được giới thiệu về các API lưu trữ cục bộ và sự hỗ trợ cho các ứng dụng không nối mạng, sẽ tiếp tục làm cho các ứng dụng Web phù hợp với các bản sao trên máy tính để bàn của chúng về chức năng, ngay cả khi không kết nối vào mạng hoặc Internet. Phần này được hoàn tất bằng một tổng quan tóm tắt về các phần tử, các thuộc tính, và các API mới khác được đề xuất trong đặc tả HTML5 hiện nay.
Các phần tử ngữ nghĩaĐặc tả HTML5 bao gồm một loạt các phần tử ngữ nghĩa mới được sử dụng để đưa ra một số nghĩa cho các phần hoặc các bộ phận khác nhau của một trang Web, chẳng hạn như tiêu đề, chân trang, chuyển hướng, và v.v.. Trong các phiên bản trước của HTML, bạn thường sử dụng các phần tử <div> để tạo những bộ phận này, sử dụng ID hoặc các thuộc tính lớp để phân biệt chúng với nhau. Vấn đề là điều này không có nghĩa ngữ nghĩa, vì không có các quy tắc nghiêm ngặt quy định phải chỉ rõ các tên lớp hoặc các ID nào được sử dụng, làm cho việc xác định vùng cụ thể nào đang làm việc trở nên vô cùng khó khăn đối với phần mềm. HTML5 giúp làm giảm bớt những vấn đề này, làm cho việc phân tích cú pháp cấu trúc ngữ nghĩa của một tài liệu trở nên dễ dàng hơn đối với các trình duyệt Web.
Thật đáng giá để nói rằng việc tiếp tục sử dụng các phần tử <div> trong HTML5 là hoàn toàn hợp lệ, nhưng để công việc của bạn được nâng cấp dễ dàng, điều quan trọng là bạn sử dụng các phần tử ngữ nghĩa ở nơi có liên quan. Mặt khác, điều cần thiết là bạn tránh sử dụng các phần tử mới cho các mục đích khác hơn so với dự định của chúng. Ví dụ, không nên sử dụng phần tử <nav> cho nhóm các liên kết bất kỳ; nó được dự kiến để bao quanh khối chuyển hướng chính trên trang đó.
Các phần tử ngữ nghĩa chính mà HTML5 giới thiệu là:
- <header (tiêu đề)>
- Phần tử này được sử dụng để định nghĩa một tiêu đề cho một số phần của một trang Web, có thể là toàn bộ trang, một phần tử <article>, hoặc một phần tử <section>.
- <footer (chân trang)>
- Giống như phần tử <header>, phần tử mới này định nghĩa một chân trang cho một số phần của một trang. Một chân trang không cần ở cuối của một trang, một phần tử article (bài viết), hoặc một phần tử section (phần), như nó thường làm.
- <nav (chuyển hướng)>
- Đây là một thùng chứa cho các liên kết chuyển hướng ban đầu trên một trang Web. Phần tử này không được dự kiến sử dụng với tất cả các nhóm các liên kết và chỉ nên được dùng cho các khối chuyển hướng lớn. Nếu bạn có một phần tử <footer> có chứa các liên kết chuyển hướng, thì bạn không cần bọc các liên kết này trong một phần tử <nav>, do phần tử <footer> cũng sẽ đáp ứng cho riêng nó.
- <article (bài viết)>
- Phần tử <article> được sử dụng để định nghĩa một mục độc lập trên trang có thể dùng cho riêng nó, chẳng hạn như một mục tin tức, bài viết trên blog, hoặc nhận xét. Thường sử dụng các nguồn cung cấp RSS để cung cấp các mục này.
- <section (phần)>
- Phần tử này đại diện cho một phần của một tài liệu hoặc ứng dụng, chẳng hạn như một chương hoặc một phần của một bài viết hoặc hướng dẫn. Ví dụ, phần bạn đang đọc bây giờ có thể được bao quanh bởi một phần tử <section> trong HTML5. Các phần tử <section> thường có một tiêu đề, mặc dù cũng không cần thiết lắm. Ví dụ, tiêu đề cho phần bạn đang đọc bây giờ sẽ chứa văn bản "Các phần tử ngữ nghĩa".
- <aside (nhận xét)>
- Phần tử mới này có thể được sử dụng để đánh dấu một thanh phụ hoặc một số nội dung khác được cho là có phần tách rời với nội dung xung quanh nó. Một ví dụ về điều này có thể là các khối quảng cáo.
- <hgroup>
- Trong một số trường hợp, một trang, bài viết, hoặc một phần có thể cần nhiều hơn một tiêu đề, chẳng hạn như ở đây bạn có một tiêu đề và phụ đề. Ví dụ, hướng dẫn này có tiêu đề "Tạo các trang Web hiện đại sử dụng HTML5 và CSS3" và phụ đề "Triển khai các phần tử canvas và video trong HTML5". Bạn có thể bọc tiêu đề và phụ đề này trong phần tử <hgroup> , bằng cách sử dụng một phần tử <h1> cho tiêu đề chính và một phần tử <h2> cho phụ đề.
Trang Web mẫu ở cuối hướng dẫn này gồm có một số các phần tử ngữ nghĩa mới này, và tôi sẽ giải thích cú pháp của chúng và sử dụng chi tiết hơn tại thời điểm đó.
Phần tử <canvas> Phần tử <canvas> (khung nền ảnh) được Apple® phát triển để sử dụng trong các widget (tiện ích) của Mac OS X Dashboard và trong Safari, nhưng sau đó đã được Mozilla® và Opera® chấp nhận trong các trình duyệt Web của họ. Phần tử này đã được tiêu chuẩn hóa và đã bao gồm trong đặc tả HTML5, cùng với một loạt các API vẽ 2D có thể được sử dụng để tạo các hình dạng, văn bản, các chuyển cảnh, và hình ảnh động bên trong phần tử này.
Nhiều người tin rằng phần tử <canvas> là một trong những khía cạnh quan trọng nhất của HTML5 do nó tạo điều kiện sản xuất các biểu đồ, các trò chơi tương tác, các ứng dụng vẽ, và các đồ họa khác đang hoạt động mà không cần cần các trình cắm thêm bên ngoài, chẳng hạn như Adobe Flash.
Chính phần tử <canvas> là khá cơ bản, định nghĩa chiều rộng, chiều cao, và mã định danh (ID) duy nhất cho đối tượng. Sau đó nhà phát triển phải sử dụng một loạt các JavaScript API để thực sự vẽ các đối tượng trên khung nền ảnh (canvas), thường khi trang Web đã hoàn tất dựng hình. Những API này cho phép nhà phát triển vẽ hình dạng và các đường kẻ, phết màu, độ mờ đục và các gradient (độ dốc); tạo văn bản; chuyển đổi các đối tượng khung nền ảnh; và thể hiện hình ảnh động. Các API cũng cho phép phần tử <canvas> tương tác và đáp ứng với đầu vào người dùng chẳng hạn như các sự kiện chuột và các sự kiện bàn phím, tạo điều kiện thuận lợi cho việc sản xuất các trò chơi và các ứng dụng Web trên khung nền ảnh. Bạn sẽ thấy một ví dụ về phần tử <canvas> đang hoạt động trong trang Web HTML5/CSS3 mẫu sau trong hướng dẫn này.
Phát <audio> và <video>Trong những năm gần đây, tính phổ biến của các trang Web chia sẻ video như YouTube và các nền tảng phân phối nội dung như Hulu đã chứng kiến một sự bùng nổ to lớn trong việc sử dụng Web để tạo luồng đa phương tiện. Thật không may, người ta không thể xây dựng được Web với nội dung theo ý đồ này, và kết quả là, định dạng tệp Flash Video (.flv) và các nền tảng Adobe Flash nhìn chung đã làm đơn giả hóa việc cung cấp các video và âm thanh.
Tuy nhiên, HTML5 bao gồm cả sự hỗ trợ cho hai phần tử mới, <audio> và <video>, cho phép các nhà phát triển Web bao gồm các nội dung đa phương tiện mà không cần người dùng cài đặt các trình cắm thêm của trình duyệt. Một số trình duyệt, gồm có Mozilla Firefox, Apple Safari, Google Chrome, đã bắt đầu hỗ trợ các phần tử mới này và cung cấp các nút điều khiển phát lại của trình duyệt chuẩn, nên chắc là người dùng sẽ chọn sử dụng chúng. Ngoài ra, một tập hợp các JavaScript API chuẩn đã được cung cấp để cho phép các nhà phát triển tạo các nút điều khiển phát lại riêng của họ, chắc là họ muốn làm như vậy. Một lợi thế quan trọng để phát lại đa phương tiện nguyên gốc là về mặt lý thuyết nó đòi hỏi ít tài nguyên CPU hơn, điều này cho phép tiết kiệm năng lượng.
Tuy nhiên, một vấn đề quan trọng với các phần tử đa phương tiện mới này là các định dạng tệp được từng trình duyệt hỗ trợ và các vấn đề cấp phép bằng sáng chế thường đi cùng với các bộ mã hóa/giải mã (codec) khác nhau dùng để mã hóa các tệp này. Mozilla và Opera muốn sử dụng các thùng chứa video Theora và codec mã nguồn mở, không đòi hỏi cấp giấy phép bằng sáng chế để bao gồm các codec đó trong trình duyệt Web. Mặt khác, Apple và Google không hài lòng với chất lượng của Theora, cụ thể đối với việc phân phối các nội dung độ nét cao (HD) trên những trang Web giống như YouTube. Họ thích codec H.264, thường có trong các tệp MP4, MOV, hoặc MKV.
Tuy nhiên, vấn đề không chỉ với video, do có các vấn đề tương tự với các codec âm thanh. Các định dạng MP3 và AAC bị hạn chế bởi các bằng sáng chế, trong khi định dạng Vorbis thì không. Vấn đề với âm thanh Vorbis là nó không được sử dụng rộng rãi, do các máy phương tiện di động và nhiều ứng dụng phần mềm phương tiện không hỗ trợ nó.
Có rất nhiều quyết định được đưa ra về các phần tử <video> về <audio> của HTML5 trong tương lai gần, và sẽ rất thú vị để xem các codec và các định dạng nào được đơn giản hóa theo khuyến cáo cuối cùng. Trong khi đó, bạn có thể cố gắng hỗ trợ tất cả các trình duyệt bằng cách làm cho video có sẵn theo một loạt các định dạng và bằng cách cung cấp video Flash như là một sự thay thế. Chúng ta hãy hy vọng rằng quyết định cuối cùng được thực hiện, và nó không để cho các nhà cung cấp trình duyệt quyết định hỗ trợ các định dạng nào, vì điều đó về cơ bản sẽ làm cho những phần tử mới này vô dụng.
Một lần nữa, bạn sẽ thấy phần tử <video> đang hoạt động sau nữa trong hướng dẫn này.
Các ứng dụng không nối mạng và lưu trữ cục bộCác nhà phát triển Web có truyền thống sử dụng các cookie để lưu trữ thông tin trên máy tính cục bộ của khách truy cập, cho phép một trang Web đọc lại thông tin này tại một điểm sau đó. Trong khi các cookie rất có ích để lưu trữ dữ liệu cơ bản, thì chúng lại bị hạn chế bởi thực tế là các trình duyệt Web thường không cần thiết giữ lại hơn 20 cookie cho mỗi một máy chủ Web hoặc nhiều hơn 4KB dữ liệu cho mỗi cookie (bao gồm cả tên và giá trị). Ngoài ra, chúng được gửi đến máy chủ Web với mọi yêu cầu HTTP, gây ra lãng phí tài nguyên.
HTML5 cung cấp một giải pháp cho các vấn đề này bằng các Local Storage API (API lưu trữ cục bộ ), được trình bày trong một đặc tả riêng với tài liệu HTML5 chính. Tập các API này cho phép các nhà phát triển lưu trữ thông tin trên máy tính của khách truy cập trong khi vẫn có cơ sở để tin chắc rằng chúng vẫn có ở đó sau này. Ngoài ra, thông tin có thể truy cập ở bất kỳ điểm nào (ngay cả sau khi trang đã được đưa ra) và không được tải tự động với mỗi yêu cầu HTTP. Đặc tả này gồm có các hạn chế cùng nguồn gốc (same-origin), để ngăn cản các trang Web khỏi bị các trang Web khác đọc hoặc thay đổi dữ liệu đã lưu.
Hầu hết các trình duyệt đều lưu trữ các trang Web trong bộ nhớ nhanh cục bộ, cho phép xem chúng ngay cả khi người dùng không nối mạng. Việc này hoạt động tốt với các trang tĩnh, nhưng nó không có sẵn cho nội dung động thường dựa vào cơ sở dữ liệu, chẳng hạn như Gmail, Facebook, Twitter. HTML5 cung cấp sự hỗ trợ cho các ứng dụng không nối mạng, ở đây trình duyệt tải tất cả các tệp cần thiết để sử dụng không cần nối mạng ứng dụng, và khi người dùng sử dụng không nối mạng ứng dụng, trình duyệt có thể cho phép các thay đổi bất kỳ được thực hiện trong quá trình này được tải lên máy chủ khi chúng kết nối lại vào mạng Internet.
Cải tiến biểu mẫu WebNếu bạn đã tạo các ứng dụng Web từ trước, bạn có khả năng quen hơn với tập các nút điều khiển biểu mẫu của HTML, một số trong đó được triển khai thực hiện bằng cách sử dụng phần tử <input>. Trong HTML 4, các kiểu đầu vào sau đây đã được hỗ trợ:
- button (nút ấn)
- checkbox (hộp kiểm tra)
- file (tệp)
- hidden (ẩn)
- image (hình ảnh)
- password (mật khẩu)
- reset (thiết lập lại)
- radio (nút tròn)
- submit (trình lên)
- text (văn bản)
Ngoài ra, có một số phần tử khác được sử dụng theo các biểu mẫu như <select> và <textarea>. Các nút điều khiển của biểu mẫu này cung cấp nhiều chức năng cho các trường biểu mẫu cơ bản như tên, số điện thoại, và địa chỉ — giống như bạn có thể thấy trên một biểu mẫu liên hệ. Tuy nhiên, Web là một nền tảng đã phát triển vượt xa giai đoạn mà ở đó các biểu mẫu HTML được sử dụng để trình lên các biểu mẫu liên hệ — bây giờ chúng được sử dụng để trình lên dữ liệu ứng dụng để xử lý bên phía máy chủ. Kết quả là, chính các nhà phát triển ứng dụng Web liên tục thấy mình cần một số nút điều khiển biểu mẫu tinh vi hơn, chẳng hạn như các nút quay tròn, các thanh trượt, các nút chọn ngày/giờ, các nút chọn màu sắc, và v.v..
Để cung cấp các kiểu nút điều khiển này, các nhà phát triển cần sử dụng một thư viện JavaScript bên ngoài để cung cấp các thành phần giao diện người dùng (UI), hoặc sử dụng một khung công tác phát triển thay thế khác như Adobe Flex, Microsoft Silverlight, JavaFX. HTML5 nhằm mục đích lấp đầy một số các khoảng trống do phiên bản trước của nó để lại trong lĩnh vực này bằng cách cung cấp toàn bộ các kiểu đầu vào khác nhau của biểu mẫu mới:
- color (màu)
- date (ngày)
- datetime (ngày giờ)
- datetime-local (ngày giờ địa phương)
- email (thư điện tử)
- month (tháng)
- number (số)
- range (phạm vi)
- search (tìm kiếm)
- tel (điện thoại)
- time (thời gian)
- url (địa chỉ)
- week (tuần)
Lúc này, việc hỗ trợ cho các trường biểu mẫu mới còn khá hạn chế. Trình duyệt Mobile Safari trên iPhone sử dụng của một số các kiểu mới này để thay đổi kiểu trình bày bàn phím cho người sử dụng (ví dụ, với các kiểu e-mail, ký hiệu @ và các phím tắt .com sẽ được hiển thị). Ngoài ra, Opera cung cấp một số widget mới cho nhiều nút điều khiển này, bao gồm một nút quay tròn cho kiểu số và một nút chọn ngày của lịch cho các kiểu có liên quan đến ngày. Kiểu có sẵn phổ biến nhất trong các đề xuất mới này là kiểu phạm vi, được Opera, Safari và Google Chrome biểu thị là một thanh trượt.
Ngoài các kiểu đầu vào mới, HTML5 cũng hỗ trợ hai tính năng chính mới cho các trường biểu mẫu. Tính năng đầu tiên trong số này là trọng tâm tự động, để ra lệnh cho một trình duyệt tự động tập trung vào một trường biểu mẫu cụ thể khi trang được biểu thị, mà không đòi hỏi mã JavaScript làm như vậy. Tính năng nâng cao thứ hai là thuộc tính giữ chỗ, cho phép nhà phát triển định nghĩa văn bản sẽ xuất hiện trong một nút điều khiển có dạng hộp văn bản khi nội dung của nó rỗng. Một ví dụ về điều này là một hộp tìm kiếm ở đó nhà phát triển không muốn sử dụng một nhãn bên ngoài hộp cho chính nó. Thuộc tính giữ chỗ cho phép nhà phát triển định rõ văn bản sẽ hiển thị khi giá trị của nút điều khiển rỗng, và nút điều khiển đó không tập trung vào. Một ví dụ về điều này được thể hiện trong Hình 1.
Hình 1. Thuộc tính giữ chỗ đang hoạt động
Như Hình 1 cho thấy, văn bản giữ chỗ của địa chỉ e-mail và số điện thoại xuất hiện với màu xám, khi trường này rỗng và không tập trung vào. Ảnh chụp màn hình này cũng cho thấy một ví dụ về một kiểu đầu vào phạm vi, ở đây được biểu diễn bằng một thanh trượt trong trình duyệt Safari. Ảnh chụp màn hình này được chụp từ trang Web mẫu được thảo luận sau nữa trong hướng dẫn này.