Tạo các trang Web hiện đại bằng cách sử dụng HTML5 và CSS3 ~ THANH DIEN IT

Triển khai thực hiện các phần tử canvas và video trong HTML5

Kể từ khi Mạng toàn cầu (World Wide Web) xuất hiện vào đầu những năm 1990, HTML đã phát triển để trở thành một ngôn ngữ đánh dấu tương đối mạnh mẽ, có thể được sử dụng để tạo các trang Web và các ứng dụng trực quan tuyệt đẹp và tương tác, trong khi vẫn nhận được tài trợ của các đối tác gần gũi của nó JavaScript và CSS. Hướng dẫn này là một giới thiệu năng động về HTML5 và CSS3. Nó cung cấp thông tin về chức năng và cú pháp cho nhiều phần tử mới và các API mà HTML5 phải cung cấp, cũng như các bộ chọn mới, các hiệu ứng, và các tính năng mà CSS3 mang đến cho bảng. Cuối cùng, nó sẽ cho bạn thấy cách phát triển một trang Web mẫu sử dụng nhiều các tính năng mới này. Khi hoàn thành hướng dẫn này, bạn sẽ sẵn sàng để xây dựng các trang Web hoặc các ứng dụng riêng của mình được vận hành bằng HTML5 và CSS3.

Bình luận:

, Nhà phát triển phần mềm, Core International

15 11 2011

Mục lục

Phát tiển và triển khai ứng dụng tiếp theo của bạn trên nền tảng đám mây IBM Bluemix.

Bắt đầu thử miễn phí

Trước khi bạn bắt đầu

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.

Về hướng dẫn này

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.

Các điều kiện tiên quyết

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.

Về đầu trang

Các tính năng mới trong HTML5

Trong 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ử

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ử

để 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ử

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ử

Các phần tử ngữ nghĩa chính mà HTML5 giới thiệu là:

: 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ử
, hoặc một phần tử
.
: Giống như phần tử
, 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.
: Đâ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ử
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ử
, do phần tử
cũng sẽ đáp ứng cho riêng nó.
: Phần tử
đượ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.
: 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ử
trong HTML5. Các phần tử
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".
: 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.
: 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ử , bằng cách sử dụng một phần tử
cho tiêu đề chính và một phần tử
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ử

Nhiều người tin rằng phần tử

Chính phần tử

Phát

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,

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ử

Một lần nữa, bạn sẽ thấy phần tử

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 Web

Nế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ử . 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ư

. 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..</p>
<p>
Để 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:</p>
<ul class="ibm-bullet-list">
<li>color (màu)</li>
<li>date (ngày)</li>
<li>datetime (ngày giờ)</li>
<li>datetime-local (ngày giờ địa phương)</li>
<li>email (thư điện tử)</li>
<li>month (tháng)</li>
<li>number (số)</li>
<li>range (phạm vi)</li>
<li>search (tìm kiếm)</li>
<li>tel (điện thoại)</li>
<li>time (thời gian)</li>
<li>url (địa chỉ)</li>
<li>week (tuần)</li>
</ul>
<p>
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.</p>
<p>
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 <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#f1">Hình 1</a>.</p>
<h5 id="f1">
Hình 1. Thuộc tính giữ chỗ đang
                        hoạt động</h5>
<img alt="Các trường đầu vào text sau được hiển thị: Name, Email,Phone, Callback on, và Priority. Trường tên có tên là Joe Lennon. Các trường Email và Phone có văn bản giữ chỗ màu xám. Một nút ở dưới đáy là 'Request call.'" src="https://www.ibm.com/developerworks/vn/edu/wa-html5/fig01.gif" width="500"><p>
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.</p>
<h3 id="N10136">
Các tính năng mới
                    khác</h3>
<p>
HTML5 bao gồm rất nhiều tính năng mới; không thể trình bày tất cả chúng
                    trong hướng dẫn này. Phần này đưa ra một cái nhìn tổng quan ngắn gọn
                    về một số các cải tiến khác trong đặc tả này.</p>
<dl>
<dt><strong>Web worker (Các trình làm việc trên nền Web)</strong></dt>
<dd>Tính năng này cho phép mã JavaScript được thiết lập để chạy trong
                        một quá trình nền đang tạo điều kiện thuận lợi cho sự phát triển
                        của các ứng dụng đa luồng. Lợi ích chủ yếu mà Các trình làm việc
                        trên nền Web (Web workers) cung cấp cho các nhà phát triển là có
                        thể xử lý tính toán tập trung trong nền mà không ảnh hưởng đến tốc
                        độ của giao diện người dùng.</dd>
<dt><strong>Geolocation (Định vị địa lý)</strong></dt>
<dd>HTML5 có một API định vị địa lý cho phép một ứng dụng Web xác định
                        vị trí địa lý hiện tại của bạn, giả sử thiết bị mà bạn đang nhắm
                        tới cung cấp các tính năng để tìm kiếm các thông tin như vậy (ví
                        dụ, GPS trên điện thoại di động). Nếu bạn không có một thiết bị hỗ
                        trợ tính năng này (chẳng hạn như một điện thoại thông minh iPhone
                        hoặc Android 2.0), bạn có thể sử dụng Firefox và tải về một trình
                        cắm thêm để cho phép bạn thiết lập vị trí của mình bằng tay.</dd>
<dt><strong>Kéo và thả</strong></dt>
<dd>Một tính năng thú vị khác chứa trong một API kéo và thả. Cho đến
                        nay, việc thực hiện kéo và thả không có các trình cắm thêm đã lệ
                        thuộc vào một số mã JavaScript rất phức tạp hoặc sử dụng một thư
                        viện JavaScript như script.aculo.us.</dd>
<dt><strong>Tạo tin nhắn giữa các tài liệu</strong></dt>
<dd>Tính năng này cho phép các tài liệu trong các cửa sổ khác nhau (và
                        với iframes khác nhau) gửi và nhận tin nhắn với nhau. Tính năng
                        này đã chứng tỏ rất có ích cho sự phát triển của các widget và các
                        ứng dụng được lưu trữ trên các máy chủ khác với máy chủ của trang
                        Web ban đầu (tương tự như các ứng dụng Facebook).</dd>
<dt><strong>Và nhiều tính năng khác</strong></dt>
<dd>Các tính năng khác mới được HTML5 giới thiệu bao gồm các kiểu MIME
                        và đăng ký trình xử lý giao thức, vì vậy các ứng dụng Web có thể
                        được đăng ký như các ứng dụng mặc định với một kiểu tệp hoặc giao
                        thức cụ thể; quản lý lịch sử trình duyệt, mà cho đến bây giờ vẫn
                        cần phải được thực hiện thủ công hoặc bằng cách sử dụng một khung
                        công tác JavaScript bên ngoài; và một loạt các phần tử và các
                        thuộc tính mới khác làm cho các nhà phát triển Web thực hiện dễ
                        dàng hơn.</dd></dl>
<p class="ibm-ind-link ibm-back-to-top">
<a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#ibm-pcon" class="ibm-anchor-up-link">Về đầu trang</a></p>
<h2 id="N10228">
Các tính năng mới trong CSS3</h2>
<p>
Phần này giới thiệu cho bạn các tính năng mới có thể tìm thấy trong các
                    đặc tả CSS cấp 3 — bao gồm các bộ chọn CSS mới ví dụ
                    như các lớp có cấu trúc, dựa vào trạng thái, và giả phủ định; cũng như
                    các kiểu bộ chọn mới khác. Nó cũng cho thấy nhiều hiệu ứng mà CSS3
                    cung cấp trước đây đã đòi hỏi các hình ảnh được tạo ra bằng cách sử
                    dụng một ứng dụng riêng biệt và được lưu trữ dưới dạng GIF, JPG, PNG.
                    Các hiệu ứng này bao gồm các hình bóng rơi trên văn bản và các hộp,
                    các góc được làm tròn trên các đường viền, và sử dụng tính mờ đục để
                    tạo ra một sự xuất hiện mờ. Nhiều tính năng trong số đó (chẳng hạn như
                    độ mờ đục và các góc được làm tròn) là tương đối phổ biến trong sử
                    dụng do thực tế là chúng làm giảm nhiều khả năng tùy chỉnh trong các
                    trình duyệt Web di sản. Tiếp theo, bạn sẽ tìm hiểu về các cách bố trí
                    nhiều cột mới mà bạn có thể tạo ra chúng khi sử dụng CSS3. Các cách bố
                    trí này là một sự tạo mẫu cho bố cục tờ báo ở nơi văn bản sẽ trải dài
                    trên một số các cột đã đặt hoặc theo chiều rộng cột cụ thể khi cần.
                    Một tính năng khác sẽ được thảo luận là vấn đề bao gồm các phông chữ
                    Web phi tiêu chuẩn nhờ sử dụng thẻ @font-face. Cuối cùng, sẽ giới
                    thiệu một số các tính năng CSS3 mới khác, chẳng hạn như sự hỗ trợ cho
                    HSL (Hue, Saturation và Lightness - Màu sắc, độ bão hòa, cường độ ánh
                    sáng) và các mô hình màu RGBA (Đỏ, Xanh lá cây, Xanh da trời, và
                    Alpha).</p>
<h3 id="N1015B">
Các bộ chọn mới</h3>
<p>
Bộ chọn CSS đề cập đến cách thức để định kiểu (các) phần tử HTML theo
                    một bảng định kiểu. Ví dụ, để đặt một đường viền xung quanh tất cả các
                    phần tử <div>
 bạn sẽ sử dụng bộ chọn div:
                    <code>div { border: 1px solid #000; }</code>.</p>
<p>
Để quét một màu nền cho tất cả các phần tử có làm nổi bật lớp, bạn sẽ
                    sử dụng bộ chọn:
                    <code>.highlight { background-color: yellow; }</code>.</p>
<p>
Cuối cùng, để thay đổi độ rộng của một phần tử có giá trị thuộc tính ID
                    là myDiv, bạn sẽ sử dụng:
                    <code>#myDiv { width: 250px; }</code>.</p>
<p>
Tất nhiên, có thể kết hợp các bộ chọn này, do đó để chọn tất cả các
                    phần tử <div>
 có làm nổi bật lớp
                    <code>highlight</code>, bạn sẽ sử dụng
                    <code>div.highlight</code>, hoặc chọn phần tử
                    <div>
 có ID là myDiv bạn sẽ sử dụng
                    <code>div#myDiv</code>.</p>
<p>
Ngoài các bộ chọn đơn giản này, CSS cũng bao gồm (và đã thực hiện kể từ
                    các phiên bản trước) một loạt các bộ chọn phức tạp hơn. Ví dụ, bạn có
                    thể sử dụng bộ chọn input[type="text"] để chọn chỉ các phần tử đầu vào
                    có chứa một kiểu thuộc tính có giá trị là <em>text</em>. Hoặc bạn có
                    thể sử dụng lớp-giả <code>:hover</code> để định kiểu một
                    phần tử khi chuột ở trên nó, ví dụ:
                    <code>a:hover { color: red; }</code>.</p>
<p>
Có nhiều bộ chọn hơn nữa, tất cả các bộ chọn đều được cung cấp để làm
                    cho việc chọn lựa một phần tử theo kiểu dáng dễ dàng hơn. Với CSS3,
                    thậm chí có nhiều bộ chọn mới hơn đã được thêm vào hòa trộn, tất cả
                    chúng đều giúp nhà phát triển thực hiện dễ dàng hơn và làm giảm số
                    lượng mã HTML và JavaScript cần phải viết.</p>
<h4 id="N10187">
Các bộ chọn thuộc
                    tính</h4>
<dl>
<dt><strong>E[foo^="bar"]</strong></dt>
<dd>Chọn một phần tử, E, mà thuộc tính <code>foo</code>
                        của nó bắt đầu chính xác bằng chuỗi
                        <code>bar</code></dd>
<dt><strong>E[foo$="bar"]</strong></dt>
<dd>Chọn một phần tử, E, mà thuộc tính <code>foo</code>
                        của nó kết thúc chính xác bằng chuỗi
                        <code>bar</code></dd>
<dt><strong>E[foo*="bar"]</strong></dt>
<dd>Chọn một phần tử, E, mà thuộc tính <code>foo</code>
                        của nó chứa chuỗi <code>bar</code></dd></dl>
<h4 id="N101A8">
Các lớp-giả có cấu
                    trúc</h4>
<dl>
<dt><strong>E:root</strong></dt>
<dd>Chọn một phần tử, E, gốc của tài liệu (thẻ <html>)</dd>
<dt><strong>E:nth-child(n)</strong></dt>
<dd>Chọn một phần tử, E, phần tử con thứ n của phần tử cha mẹ của
                        nó</dd>
<dt><strong>E:nth-last-child(n)</strong></dt>
<dd>Chọn một phần tử, E, phần tử con cuối cùng thứ n của phần tử cha
                        mẹ của nó</dd>
<dt><strong>E:nth-of-type(n)</strong></dt>
<dd>Chọn một phần tử, E, phần tử anh chị em thứ n của kiểu của nó</dd>
<dt><strong>E:nth-last-of-type(n)</strong></dt>
<dd>Chọn một phần tử, E, phần tử anh chị em cuối cùng thứ n của kiểu
                        của nó</dd>
<dt><strong>E:last-child</strong></dt>
<dd>Chọn một phần tử, E, mà phần tử của nó là phần tử con cuối cùng
                        của phần tử cha mẹ của nó (Lưu ý rằng E:first-child đã được định
                        nghĩa trước trong CSS2)</dd>
<dt><strong>E:first-of-type</strong></dt>
<dd>Chọn một phần tử, E, phần tử anh chị em đầu tiên của kiểu của
                        nó</dd>
<dt><strong>E:last-of-type</strong></dt>
<dd>Chọn một phần tử, E, phần tử anh chị em cuối cùng của kiểu của
                        nó</dd>
<dt><strong>E:only-child</strong></dt>
<dd>Chọn một phần tử, E, phần tử con duy nhất của phần tử cha mẹ của
                        nó</dd>
<dt><strong>E:only-of-type</strong></dt>
<dd>Chọn một phần tử, E, phần tử anh chị em duy nhất của kiểu của
                        nó</dd>
<dt><strong>E:empty</strong></dt>
<dd>Chọn một phần tử, E, không có phần tử con nào (bao gồm cả các nút
                        văn bản)</dd></dl>
<h4 id="N101DA">
Lớp-giả
                    <code>target</code></h4>
<dl>
<dt><strong>E:target</strong></dt>
<dd>Chọn một phần tử, E, là đích của URI đang biểu thị</dd></dl>
<h4 id="N101E6">
Phần tử UI nói đến các
                    lớp-giả</h4>
<dl>
<dt><strong>E:enabled</strong></dt>
<dd>Chọn một phần tử giao diện người dùng, E, được kích hoạt</dd>
<dt><strong>E:disabled</strong></dt>
<dd>Chọn một phần tử giao diện người dùng, E, bị vô hiệu hóa</dd>
<dt><strong>E:checked</strong></dt>
<dd>Chọn một phần tử giao diện người dùng, E (một nút radio hay hộp
                        kiểm tra), được đánh dấu chọn hoặc được chọn</dd></dl>
<h4 id="N101F8">
Các lớp-giả
                    <code>Negation</code></h4>
<dl>
<dt><strong>E:not(s)</strong></dt>
<dd>Chọn một phần tử, E, không khớp với bộ chọn đơn giản s</dd></dl>
<h4 id="N10204">
Bộ kết hợp anh chị em
                    chung</h4>
<dl>
<dt><strong>E ~ F</strong></dt>
<dd>Chọn một phần tử, F, có một phần tử E đứng trước</dd></dl>
<p>
Sự hỗ trợ của trình duyệt cho các bộ chọn thuộc tính mới và bộ kết hợp
                    anh chị em chung là tuyệt vời, do chúng làm việc trên hầu như tất cả
                    các trình duyệt Web hiện đại. Sự hỗ trợ cho các lớp-giả mới có trong
                    các phiên bản mới nhất của hầu hết các trình duyệt, nhưng bạn có thể
                    cần có cả các bản thay thế cho các trình duyệt cũ hơn như Internet
                    Explorer 6/7 và Firefox 3.0.</p>
<h3 id="N10210">
Các hiệu ứng mới </h3>
<p>
Mặc dù các bộ chọn mới có lẽ là những tính năng làm giảm đau đầu cho
                    các nhà phát triển nhiều nhất, những cải tiến mà mọi người muốn nhìn
                    thấy là các hiệu ứng mới sáng chói có sẵn. Các hiệu ứng này được đơn
                    giản hóa thông qua một loạt các đặc tính CSS mới, bao gồm:</p>
<ul class="ibm-bullet-list">
<li>nền (bây giờ mới hỗ trợ nhiều nền)</li>
<li>mẫu-nền </li>
<li>gốc-nền</li>
<li>kích thước-nền</li>
<li>bán kính-đường viền (các góc được làm tròn)</li>
<li>hình ảnh-đường viền</li>
<li>màu sắc-đường viền (các đườmg viền gradient)</li>
<li>hình bóng-hộp (bóng rơi trên các hộp không có hình ảnh)</li>
<li>kích thước-hộp</li>
<li>độ mờ</li>
<li>khoảng trống-đường bao </li>
<li>chỉnh lại kích thước</li>
<li>tràn-văn bản </li>
<li>hình bóng-văn bản </li>
<li>bọc-từ</li>
</ul>
<p>
Trang Web HTML5/CSS3 mẫu mà bạn sẽ tạo ở cuối của hướng dẫn này sẽ hiển
                    thị một số những hiệu ứng mới đang hoạt động.</p>
<h3 id="N10238">
Các bố trí nhiều cột</h3>
<p>
Các cách bố trí nhiều cột CSS3 tính đến văn bản được trải rộng trên một
                    số cột, giống như bạn có thể thấy trong một tờ báo. Điều này có thể
                    được thực hiện theo hai cách, hoặc sử dụng đặc tính độ rộng cột, ở đó
                    bạn định nghĩa mỗi cột sẽ rộng bao nhiêu (số lượng các cột được xác
                    định bởi các vùng có sẵn cho thùng chứa), hoặc bằng cách sử dụng
                    đếm-cột, ở đó bạn định nghĩa số lượng các cột cần được sử dụng. Sau đó
                    độ rộng sẽ thay đổi dựa vào vùng có sẵn cho mỗi cột.</p>
<p>
Các tính năng khác về các cách bố trí nhiều cột bao gồm đặc tính khoảng
                    hở-cột, cho phép nhà phát triển định nghĩa khoảng không gian cần có
                    giữa các cột khi sử dụng phương thức độ rộng-cột. Một sự bổ sung có
                    ích khác là đặc tính quy tắc-cột, cho phép một quy tắc định kiểu-đường
                    viền được đặt giữa các cột. Cuối cùng có đặc tính là phân phối-không
                    gian-cột, xác định cách để lại khoảng trống cần được phân bổ giữa các
                    cột.</p>
<p>
Các cách bố trí các cột hiện được các trình duyệt Mozilla và WebKit hỗ
                    trợ. Hiện nay, các cách bố trí này được thực hiện bằng các đặc tính
                    độc quyền tạm thời được bắt đầu bằng - moz hay -Webkit, tương ứng. Khi
                    đặc tả này đã được hoàn tất, các trình duyệt này cuối cùng sẽ chuyển
                    sang các đặc tính tiêu chuẩn CSS.</p>
<h3 id="N10243">
Các phông chữ Web</h3>
<p>
Các phông chữ Web đã thực sự được đề xuất cho CSS2 và đã có sẵn trong
                    Microsoft Internet Explorer từ phiên bản 5. Thật không may, việc này
                    đòi hỏi sử dụng định dạng phông chữ .eot độc quyền (Embedded Open Type
                    - Kiểu mở nhúng), và không ai trong số các nhà cung cấp trình duyệt
                    khác lại chọn triển khai nó. Kết quả là, các phông chữ Web không bao
                    giờ thực sự được chọn trên các trang Web dựa vào CSS2.</p>
<p>
Tuy nhiên, với các phiên bản mới nhất của các trình duyệt Firefox,
                    Safari, Chrome, và Opera, bây giờ bạn có thể sử dụng quy tắc
                    @font-face để sử dụng bất kỳ các phông chữ được cấp phép .ttf
                    (TrueType) hoặc .otf (OpenType) trên trang Web của mình. Một ví dụ về
                    quy tắc quy tắc @font-face như sau:
                    <code>@font-face { font-family: Alexa; src:
                        url('Alexa.otf'); }</code>.</p>
<p>
Bây giờ bạn có thể sử dụng phông chữ này theo các quy tắc CSS riêng của
                    bạn, chẳng hạn như:
                    <code>article p
                        { font-family: Alexa, Arial, Helvetica, sans-serif; }</code>.</p>
<p>
Hãy nhớ rằng các phông chữ giống như các hình ảnh — nếu
                    chúng không phải là của riêng bạn thì bạn có thể cần giấy phép để sử
                    dụng chúng trên Web. Ngoài ra, bạn có thể trả tiền (hoặc tải về miễn
                    phí) cho một số phông chữ trả phí một lần để có thể đưa các phông này
                    vào các trang Web của bạn khi bạn thích.</p>
<h3 id="N10259">
Các tính năng mới
                    khác</h3>
<p>
CSS3 cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ cho các giá
                    trị màu mới, đặc biệt là HSL (Hue, Saturation, Lightness) và hai giá
                    trị màu có các đặc tính alpha — RGBA (Red, Green, Blue,
                    Alpha) và HSLA (Hue, Saturation, Lightness, Alpha). Các truy vấn
                    phương tiện sẽ cho phép bạn định nghĩa kiểu dáng khác nhau cho các
                    thiết bị khác nhau dựa vào kích thước khung nhìn của chúng. Ví dụ, bạn
                    có thể cung cấp kiểu dáng cụ thể cho các thiết bị có khung nhìn thấp
                    hơn 500 điểm ảnh (chẳng hạn như điện thoại thông minh, PDA hoặc các
                    thiết bị di động khác). Mô đun tiếng nói của CSS3 cho phép bạn điều
                    khiển các đặc tính tiếng nói cho một trình đọc màn hình, bao gồm cả âm
                    lượng, sự cân bằng, tốc độ, nén, và nhiều hơn nữa.</p>
<p class="ibm-ind-link ibm-back-to-top">
<a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#ibm-pcon" class="ibm-anchor-up-link">Về đầu trang</a></p>
<h2 id="N1034B">
Kết hợp tất cả lại với nhau: Trang HTML5/CSS3 mẫu</h2>
<p>
Ở giai đoạn này, chắc bạn muốn nhúng tay vào và bắt đầu tạo các trang
                    sử dụng các tính năng mới quan trọng mà HTML5 và CSS3 cần cung cấp.
                    Trong phần này, bạn sẽ tạo một trang HTML có chứa nhiều tính năng mới
                    này. Phần này của hướng dẫn sẽ chia sự phát triển của trang thành các
                    phần con như sau:</p>
<ul class="ibm-bullet-list">
<li>Cấu trúc trang HTML5 cơ bản</li>
<li>Sử dụng các phần tử ngữ nghĩa mới</li>
<li>Giới thiệu phần tử <video> </li>
<li>Cải tiến biểu mẫu Web</li>
<li>Phần tử <canvas> và API vẽ 2D </li>
</ul>
<p>
Toàn bộ mã nguồn sẽ được xây dựng trong một tệp HTML duy nhất, có tên
                    là index.html (xem phần <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#download">Tải về</a>). Bạn có
                    thể mở tệp này từ bất kỳ vị trí nào trên máy tính của bạn; không cần
                    triển khai tệp này lên một máy chủ Web để tải về. Một số trình duyệt
                    có thể cung cấp cho bạn các cảnh báo về việc chạy kịch bản lệnh cục
                    bộ, vì vậy hãy chắc chắn theo dõi các tính năng tạo kịch bản động nếu
                    được yêu cầu.</p>
<p>
Trong lúc thực hiện, hãy bổ sung thêm các quy tắc CSS cho trang này vào
                    một tệp bảng định kiểu bên ngoài, có tên là styles.css. Bạn sẽ thấy
                    một số ví dụ về các đặc tính CSS3 mới như là bán kính-đường viền,hình
                    bóng-văn bản, hình bóng-hộp trong trang mẫu này.</p>
<p>
Dù sao, thế cũng đủ cho công việc này rồi, vậy chúng ta hãy bắt đầu với
                    một số HTML5!</p>
<h3 id="N1027E">
Cấu trúc trang HTML5 cơ
                    bản</h3>
<p>
Như bạn đã biết rõ, các trình duyệt Web có thể hoạt động trong các chế
                    độ khác nhau tùy thuộc vào việc có sẵn một doctype (kiểu văn bản hợp
                    lệ) trong một tài liệu HTML không. Nếu không tìm thấy doctype hợp lệ
                    nào, trình duyệt sẽ hoạt động trong chế độ quirks, trong đó một số
                    tính năng phi tiêu chuẩn được duy trì để tương thích ngược. Nếu tìm
                    thấy có doctype hợp lệ, trình duyệt sẽ hoạt động trong chế độ các
                    chuẩn, theo các chuẩn W3C và IETF.</p>
<p>
Kiểu văn bản cho HTML5 là rất đơn giản:
                    <code><!doctype
                    html></code>.</p>
<p>
Bạn nên đặt dòng này ở đầu mỗi trang HTML5 mà bạn tạo. Chúng ta hãy
                    tiếp tục và định nghĩa các phác thảo cơ bản cho trang index.html. Có
                    thể tìm thấy đoạn mã này trong <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l1">Liệt kê 1</a>.</p>
<h5 id="l1">
Liệt kê 1. Cấu
                        trúc tài liệu HTML5 cơ bản</h5>
<div class="codesection">
<pre class="displaycode"><!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Demo</title>
        <link rel="stylesheet" href="styles.css" />
        
    </head>
    <body>

</body>
</html></pre>
</div>
<p>
Bạn có thể nhận thấy rằng không giống như các hương vị XHTML gần đây
                    của HTML, thẻ <html> đang mở không còn đòi hỏi các thuộc tính
                    <code>xmlns</code> hoặc
                    <code>xml:lang</code> nữa, và chỉ riêng thuộc tính
                    <code>lang</code> cũng đủ. Tương tự như vậy, phần tử
                    <meta> mô tả một tập ký tự thuộc tính tốc ký mới để định nghĩa
                    mã hóa ký tự của trang. Thật đáng giá để nói rằng những thay đổi này
                    chỉ làm dễ dàng hơn và làm giảm số lượng mã cần thiết để thực hiện các
                    nhiệm vụ đơn giản. Các phương thức cũ vẫn hoàn toàn hợp lệ.</p>
<p>
Bạn cũng có thể tự hỏi tại sao phần tử <link> không mô tả thuộc
                    tính <code>type</code> (kiểu). CSS chỉ được hỗ trợ kiểu
                    bảng định kiểu hiện nay, và tất cả các trình duyệt hiện đại sẽ thừa
                    nhận kiểu text/css nếu không có kiểu nào được cung cấp, vì vậy kiểu
                    không phải là bắt buộc. Vậy, hoàn toàn có thể cung cấp thuộc tính
                    <code>type</code> nếu bạn muốn như vậy.</p>
<p>
Điểm cuối cùng đáng chú ý trong <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l1">Liệt kê 1</a> là phần tử
                    <script>, nó tải tệp JavaScript html5.js được lưu trữ trên máy
                    chủ ngoài. Khi các trình duyệt Microsoft Internet Explorer (phiên bản
                    8) không hỗ trợ các phần tử HTML5 mới, trình duyệt này không nhận ra
                    các phần tử như <article>, <section>, <header>, và
                    v.v. Nó không chỉ không nhận ra những phần tử này, mà còn ngăn cản
                    chúng được định kiểu. Nỗ lực thành công để tránh các vấn đề này là sử
                    dụng hàm JavaScript
                    <code>document.createElement()</code> để tạo các phần tử
                    giả cho mỗi thẻ. Kịch bản lệnh này sẽ thực hiện việc này cho tất cả
                    các phần tử HTML5 mới do đó bạn không phải lo lắng về nó. Tôi khuyên
                    bạn nên bao gồm cả kịch bản lệnh này trong tất cả các công việc HTML5
                    của bạn.</p>
<p>
Tiếp theo, bạn sẽ thêm một số các phần tử ngữ nghĩa mới vào trang này
                    để tạo cấu trúc hình ảnh của trang. Bạn cũng sẽ tạo ra một số quy tắc
                    của bảng định kiểu để làm cho trang này trông dễ coi hơn.</p>
<h3 id="N102B5">
Sử dụng các phần tử ngữ nghĩa
                    mới</h3>
<p>
Để minh họa cách các phần tử ngữ nghĩa HTML5 mới nên được sử dụng như
                    thế nào, bây giờ bạn sẽ thêm những các phần tử ngữ nghĩa này vào tệp
                    index.html. Cấu trúc cơ bản của các phần tử này sẽ tuân thủ nét phác
                    thảo sau đây:</p>
<ul class="ibm-bullet-list">
<li>header (tiêu đề)<br><ul class="ibm-bullet-list">
<li>hgroup</li>
</ul>
</li>
<li>nav (chuyển hướng)</li>
<li>article (bài viết)<br><ul class="ibm-bullet-list">
<li>header (tiêu đề)</li>
<li>section (phần)<br><ul class="ibm-bullet-list">
<li>header (tiêu đề)</li>
</ul>
</li>
</ul>
</li>
<li>footer (chân trang)</li>
</ul>
<p>
Như bạn thấy, trang này sẽ tự mở ra với một header (tiêu đề), theo sau
                    bởi một nav (chuyển hướng), sau đó một article bài viết), và cuối cùng
                    là một footer (chân trang). header sẽ có nhiều nhóm tiêu đề sử dụng
                    phần tử hgroup. article sẽ có một tiêu đề cũng như một phần tử section
                    cũng có tiêu đề riêng của nó. Mã cho cấu trúc này được thể hiện trong
                        <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l2">Liệt kê 2</a>, và nên được thêm vào giữa thẻ
                    <body> mở và đóng của <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l1">Liệt kê 1</a>.</p>
<h5 id="l2">
Liệt kê 2. Khi sử
                        dụng các phần tử ngữ nghĩa HTML5</h5>
<div class="codesection">
<pre class="displaycode"><header>
    <hgroup>
        <h1>
Company Name</h1>
<h2>
An example of HTML5 and CSS3 in action</h2>
</hgroup>
</header>

<nav>
    <ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

<article>
    <header>
        <time datetime="2010-01-12" pubdate>
            <span>Jan</span> 12
        </time>
        <h1>
            <a href="#" title="Link to this post" 
rel="bookmark">Article Heading</a>
        </h1>
</header>
    <p>
This is an article that demonstrates some of the new features 
that HTML5 and CSS3 has to offer. This article contains several sections, each 
with its own heading, as well as a video element which will play a video without 
Flash on browsers that support it.</p>
<section>
        <header>
            <h1>
This is a section heading</h1>
</header>
        <p>
This is an example of a basic section of a document. 
A section can refer to different parts of a document, application, or page. 
According to the draft W3C spec, HTML5 sections usually have headings.</p>
</section>
</article>

<footer>
    <p>
© 2009 Company Name. All rights reserved.</p>
</footer></pre>
</div>
<p>
Đoạn mã trong <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l2">Liệt kê 2</a> tương đối rõ ràng. Phần tử
                    <header> > chính bao gồm một phần tử <hgroup> có hai nhóm
                    tiêu đề: một phần tử tiêu đề <h1>
 và một phần tử phụ đề
                    <h2>
. Phần tử <nav> chính là một danh sách không theo thứ
                    tự có ba mục, mỗi một mục liên kết đến một trang hư cấu trên trang Web
                    đó. Phần tử <article> chứa <header> riêng của mình, có một
                    phần tử <time> chỉ ngày công bố bài viết. Bạn sẽ thấy rằng phần
                    tử này có chứa một thuộc tính datetime (ngày giờ), để chỉ rõ một biểu
                    mẫu chuẩn hóa của ngày đăng bài để các máy tính có thể đọc nó dễ dàng.
                    Nội dung của phần tử time (thời gian) là "Jan 12" (12 tháng Giêng) để
                    mọi người thấy dễ đọc hơn. Thuộc tính
                    <code>pubdate</code> cho biết rằng đây là ngày công bố
                    bài viết theo yêu cầu.</p>
<p>
Bên dưới tiêu đề là một đoạn HTML bình thường, và theo sau nó là một
                    phần tử <section> mới, có chứa một <header> có tiêu đề và
                    một đoạn của phần này. Bạn sẽ tạo ra nhiều phần hơn nữa với các vùng
                    bổ sung của trang được tạo trong các phần còn lại của hướng dẫn
                    này.</p>
<p>
Nếu bạn mở trang này trong trình duyệt của bạn, nó sẽ trông không đẹp
                    lắm, vì nó vẫn còn chưa được định kiểu với CSS. Hãy thêm một số kiểu
                    dáng để làm cho các trang trông đẹp hơn một chút. Hãy thêm đoạn mã của
                    Liệt kê 3 vào tệp styles.css.</p>
<h5 id="l3">
Liệt kê 3. Các
                        kiểu dáng CSS cho các phần tử HTML5 ngữ nghĩa mới</h5>
<div class="codesection">
<pre class="displaycode"> * {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    width: 480px; margin: 0px auto;
}

header h1 {
    font-size: 36px; margin: 0px;
}

header h2 {
    font-size: 18px; margin: 0px; color: #888;
    font-style: italic;
}

nav ul {
    list-style: none; padding: 0px; display: block;
    clear: right; background-color: #666;
    padding-left: 4px; height: 24px;
}

nav ul li {
    display: inline; padding: 0px 20px 5px 10px;
    height: 24px; border-right: 1px solid #ccc;
}

nav ul li a {
    color: #EFD3D3; text-decoration: none;
    font-size: 13px; font-weight: bold;
}

nav ul li a:hover {
    color: #fff;
}

article > header time {
    font-size: 14px; display: block; width: 26px;
    padding: 2px; text-align: center; background-color: #993333;
    color: #fff; font-weight: bold; -moz-border-radius: 6px;
    -webkit-border-radius: 6px; border-radius: 6px; float: left;
    margin-bottom: 10px;
}

article > header time span {
    font-size: 10px; font-weight: normal;
    text-transform: uppercase;
}

article > header h1 {
    font-size: 20px; float: left;
    margin-left: 14px; text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
    color: #993333;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

footer p {
    text-align: center; font-size: 12px;
    color: #888; margin-top: 24px;
}</pre>
</div>
<p>
Hầu hết các quy tắc CSS này đều chứa các đặc tính đã có sẵn trong CSS
                    vào lúc này, nhưng bạn có thể nhận thấy rằng quy tắc
                    <code>article > header
                        time</code>
                    chứa các thuộc tính bán kính-đường viền (bao gồm các đặc tính riêng
                    biệt của trình duyệt cho các trình duyệt dựa trên Mozilla và WebKit).
                    Quy tắc này thêm góc được làm tròn cho hộp ngày/giờ trên các trình
                    duyệt được hỗ trợ, chẳng hạn như Firefox, Safari, và Chrome.</p>
<p>
Bạn cũng sẽ nhận thấy việc sử dụng đặc tính hình bóng-văn bản theo quy
                    tắc
                    <code>article >
                        header h1</code>.
                    Hầu hết các trình duyệt hiện đại đều hỗ trợ đặc tính này. </p>
<p>
Những điều thú vị về cả hai đặc tính của CSS3 được giới thiệu trong
                    phần này là chúng làm giảm khả năng tùy chỉnh. Nói cách khác, nếu
                    trình duyệt Web của khách truy cập không hỗ trợ những đặc tính mới
                    này, thì đơn giản là chúng sẽ bị bỏ qua và các phần tử sẽ được định
                    kiểu theo các đặc tính được hỗ trợ khác bất kỳ. Trang này bao gồm các
                    nội dung hiện có của nó sẽ trông giống như ảnh chụp màn hình trong
                    Hình 2 (ít nhất đây là cách nhìn thấy nó trong Safari 4 trên Mac OS
                    X).</p>
<h5 id="f2">
Hình 2. Các phần tử ngữ nghĩa
                        HTML5 đang hoạt động</h5>
<img alt="Ảnh chụp màn hình cho thấy các biểu mẫu text khác nhau được HTML5 và CSS3 tạo ra, chứa tiêu đề trang có màu, gạch dưới và tiêu đề phần chữ đậm." src="https://www.ibm.com/developerworks/vn/edu/wa-html5/fig02.jpg" width="500"><p>
Tiếp theo, bạn sẽ được giới thiệu về phần tử <video> và cách sử
                    dụng nó để chứa một tệp video Theora trong trang HTML5 của bạn.</p>
<h3 id="N1030F">
Giới thiệu phần tử
                    <video> </h3>
<p>
Bây giờ bạn sẽ thêm một video vào trang index.html cùng với một tập các
                    nút điều khiển phát lại được cung cấp theo trình duyệt. Xin lưu ý rằng
                    video có trong ví dụ mẫu này là một đoạn video Theora, chỉ có thể được
                    phát trên trình duyệt Firefox và Google Chrome. Safari hiện tại chỉ hỗ
                    trợ các video được mã hóa H.264. Thêm đoạn mã của <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l4">Liệt
                        kê 4</a> vào bên dưới thẻ </section> đóng cuối cùng của <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l2">Liệt kê 2</a>, nhưng ở bên trên thẻ </article>
                    đóng.</p>
<h5 id="l4">
Liệt kê 4. Thêm
                        một video vào trang</h5>
<div class="codesection">
<pre class="displaycode"><section>
    <header>
        <h1>
This is a video section</h1>
</header>
    <p>
        <video src="http://www.double.co.nz/video_test/transformers480.ogg" 
controls autoplay>
            <div class="no-html5-video">
                <p>
This video will work in Mozilla Firefox or Google 
Chrome only.</p>
</div>
</video>
    </p>
</section></pre>
</div>
<p>
Như bạn thấy, trước tiên bạn tạo một phần mới mà ở đó video sẽ được
                    hiển thị trên trang này. Phần mới này có một tiêu đề tiếp theo là
                    chính đoạn video đó. Đoạn video mà tôi đang sử dụng ở đây là một đoạn
                    phim quảng cáo cho bộ phim Transformers đầu tiên và được tải từ một
                    trang Web ngoài bằng cách sử dụng thuộc tính
                    <code>src</code>. Thuộc tính
                    <code>controls</code> ra lệnh cho trình duyệt hiển thị
                    các nút điều khiển chuẩn của trình duyệt để phát lại video. Và thuộc
                    tính <code>autoplay</code>, cũng ra lệnh cho trình duyệt
                    bắt đầu phát đoạn video tự động.</p>
<p>
Giữa các thẻ <video> mở và đóng tôi đã tạo ra một phần tử
                    <div>
 có lớp <code>no-html5-video</code>, để hiển
                    thị một thông báo tới những người dùng đang cố gắng xem video trong
                    một trình duyệt không hỗ trợ phần tử <video> hoặc không hỗ trợ
                    codec video của Theora.</p>
<p>
Trước khi bạn tiếp tục và bắt đầu trang này trong trình duyệt của mình,
                    hãy thêm một số quy tắc mới vào trang styles.css. Chỉ cần thêm các quy
                    tắc từ <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l5">Liệt kê 5</a> vào dưới cùng của tệp này.</p>
<h5 id="l5">
Liệt kê 5. Các quy
                        tắc CSS cho phần video</h5>
<div class="codesection">
<pre class="displaycode">article > section video {
    width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {
    width: 480px; height: 40px; border: 1px solid #993333;
    text-align: center; color: #993333; font-size: 13px;
    font-style: italic; background-color: #F7E9E9;
}</pre>
</div>
<p>
Các quy tắc này chỉ đơn giản định nghĩa kích thước của các phần tử
                    thùng chứa video, cũng như thông báo lỗi cho những khách truy cập đang
                    sử dụng các trình duyệt không hỗ trợ video HTML5 hoặc định dạng
                    Theora. Nếu bạn mở trang Web trong Firefox hoặc Chrome, bạn sẽ thấy
                    một video trông như sau (xem <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#f3">Hình 3</a>).</p>
<h5 id="f3">
Hình 3. Video HTML5 đang hoạt
                        động</h5>
<img alt="Một cửa sổ đang phát video, có một nút của bộ theo dấu thời gian và âm lượng ở dưới đáy." src="https://www.ibm.com/developerworks/vn/edu/wa-html5/fig03.gif" width="500"><p>
Đẹp thật? Bây giờ hãy thử mở nó trong một trình duyệt như Internet
                    Explorer hay Opera. Bạn sẽ thấy một lỗi như thông báo được hiển thị
                    dưới đây trong <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#f4">Hình 4</a>. Lưu ý rằng nếu bạn cố gắng
                    xem nó trong Safari thì trình duyệt này chỉ có thể hiển thị máy phát
                    video của mình, chứ không phát đoạn video đó.</p>
<h5 id="f4">
Hình 4. Lỗi không hỗ trợ video
                        HTML5</h5>
<img alt="Một cửa sổ tương tự như trong hình trước, nhưng lúc này có đọc thông báo lỗi, 'Video sẽ chỉ làm việc với Mozilla Firefox hoặc Google Chrome.'" src="https://www.ibm.com/developerworks/vn/edu/wa-html5/fig04.gif" width="500"><p>
Tiếp theo, bạn sẽ tạo một biểu mẫu có một số tính năng biểu mẫu Web mới
                    như văn bản giữ chỗ, trọng tâm tự động, và các kiểu đầu vào mới chẳng
                    hạn như phạm vi, datetime, và email.</p>
<h3 id="N10362">
Cải tiến biểu mẫu Web</h3>
<p>
Một trong những khía cạnh của HTML5 bị coi nhẹ hơn là việc đưa vào một
                    số nút điều khiển dựa theo biểu mẫu mới để giúp các nhà phát triển
                    thực hiện dễ dàng hơn nhiều khi tạo các ứng dụng Web dựa vào biểu mẫu.
                    Hiện nay, sự hỗ trợ cho các nút điều khiển mới về mặt các widget và
                    chức năng của trình duyệt còn khá mỏng, nhưng chúng làm giảm khả năng
                    tùy chỉnh như các hộp văn bản thông thường nên bây giờ bạn có thể an
                    toàn sử dụng chúng trong mã của bạn, và khi sự hỗ trợ cho trình duyệt
                    được cải thiện, các tính năng này sẽ bật lên tự động.</p>
<p>
Thêm mã từ <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l6">Liệt kê 6</a> trực tiếp bên dưới thẻ
                    </section> đóng cho phần video mà bạn đã tạo trong <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l4">Liệt kê 4</a>.</p>
<h5 id="l6">
Liệt kê 6. Thêm
                        một biểu mẫu Web</h5>
<div class="codesection">
<pre class="displaycode"><section>
    <header>
        <h1>
This is a feedback form</h1>
</header>
    <p>
<form>
        <label for="contact_name">Name:</label>
        <input id="contact_name" placeholder="Enter your name" 
autofocus><br />
        <label for="contact_email">E-mail:</label>
        <input type="email" id="contact_email" placeholder="Enter 
your email address"><br />            
        <label for="contact_phone">Phone:</label>
        <input type="tel" id="contact_phone" placeholder="Enter your 
phone number"><br />
        <label for="contact_callback">Callback on:</label>            
<input type="datetime" id="contact_callback"><br />
        <label for="contact_priority">Priority:</label>
        <input type="range" min="1" max="5" value="1" 
id="contact_priority"><br /><br />
        <input type="submit" value="Request Call">
    </form>
</p>
</section></pre>
</div>
<p>
Phần tử biểu mẫu đầu tiên trong <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l6">Liệt kê 6</a> không có
                    bất kỳ thuộc tính <code>type</code> nào, và kết quả là
                    nó sẽ đặt mặc định với một nút điều khiển văn bản. Bạn sẽ nhận thấy
                    rằng biểu mẫu này có văn bản giữ chỗ "Hãy nhập tên của bạn" và được
                    thiết lập trọng tâm tự động. Việc hỗ trợ các trình duyệt sẽ tự động
                    chuyển trọng tâm vào phần tử này khi trang đã được biểu thị.</p>
<p>
Phần tử tiếp theo là kiểu "email" và lại chứa một giá trị văn bản giữ
                    chỗ. Trình duyệt duy nhất nhận ra kiểu phần tử đầu vào này là đặc
                    trưng riêng là Opera, trong trường này phần tử này hiển thị một biểu
                    tượng thư để nói rằng nó là một trường email.</p>
<p>
Trường quan tâm tiếp theo là trường datetime với nhãn "Callback on:".
                    Về hỗ trợ cho các trình duyệt, trường này sẽ hiển thị một nút chọn
                    ngày và thời gian. Trong Opera, trường này hiển thị làm hai nút điều
                    khiển, một hộp văn bản có một nút chọn ngày (datepicker) và một nút
                    quay tròn cho thời gian.</p>
<p>
Cuối cùng, bạn sẽ thấy một nút điều khiển của kiểu range (phạm vi), có
                    giá trị thiết lập là min (tối thiểu), max (tối đa), và các thuộc tính
                    giá trị. Safari, Chrome, và Opera biểu thị nút điều khiển này dưới
                    dạng một thanh trượt, có giá trị tối thiểu là 1, được chọn theo mặc
                    định, và giá trị tối đa là 5. Các trình duyệt không được hỗ trợ chỉ
                    đơn giản hiển thị nút điều khiển này là một hộp văn bản có giá trị văn
                    bản đặt tới 1.</p>
<p>
Tiếp theo, chúng ta hãy thêm một số tính năng độc đáo và hấp dẫn vào để
                    làm thay đổi một biểu mẫu khá buồn tẻ và nhàm chán. Hãy thêm các quy
                    tắc sau đây (xem <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l7">Liệt kê 7</a>) vào tệp styles.css của
                    bạn.</p>
<h5 id="l7">
Liệt kê 7. Các quy
                        tắc CSS của biểu mẫu Web</h5>
<div class="codesection">
<pre class="displaycode">article > section form {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
    padding: 10px; margin-bottom: 30px;
}

article > section label {
    font-weight: bold; font-size: 13px;
}

article > section input {
    margin-bottom: 3px; font-size: 13px;
}</pre>
</div>
<p>
Khi xem xét <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l7">Liệt kê 7</a> chi tiết hơn, bạn sẽ thấy rằng
                    bán kính đường viền đã được thêm vào thùng chứa biểu mẫu để làm tròn
                    các góc hộp. Ngoài ra, một hình bóng hộp đã được thêm vào phần tử này
                    cùng với một màu nền màu xám nhạt và một số vật đệm.</p>
<p>
Trước tiên, hãy xem xét biểu mẫu này khi nó xuất hiện trong Opera,
                    trình duyệt này có sự hỗ trợ nhiều nhất cho các kiểu đầu vào của biểu
                    mẫu Web HTML5 mới (xem<a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#f5">Hình 5</a>).</p>
<h5 id="f5">
Hình 5. Các cải tiến biểu mẫu Web
                        trong Opera</h5>
<img alt="Một biểu mẫu trả về tương tự như hình 1, nhưng có các tính năng bổ sung như là một biểu tượng email bên cạnh nhãn 'Email', một trường ngày giờ với nhãn'Callback on:' và một phạm vi cho nhãn 'Priority'." src="https://www.ibm.com/developerworks/vn/edu/wa-html5/fig05.gif" width="500"><p>
Bạn có thể thấy biểu tượng thư bên cạnh trường email, và các nút điều
                    khiển mới cho trường datetime. Việc nhấn vào trường thả xuống của nút
                    quay tròn sẽ mở ra tiện ích (widget) lịch của Opera, như hiện thị
                    trong <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#f6">Hình 6</a> bên dưới.</p>
<h5 id="f6">
Hình 6. Widget lịch của
                        Opera</h5>
<img alt="Widget lịch của Opera, đặt vào tháng 2 năm 2020" src="https://www.ibm.com/developerworks/vn/edu/wa-html5/fig06.jpg" width="229"><p>
Bạn cũng có thể thấy một nút điều khiển thanh trượt không hấp dẫn lắm
                    như Opera đã đưa ra. Tuy nhiên, thật thất vọng, Opera không hỗ trợ các
                    đặc tính bán kính đường viền hoặc hình bóng hộp, và kết quả là, cả hai
                    hiệu ứng này đều đã không được đưa vào biểu mẫu này. Bây giờ chúng ta
                    hãy mở nó trong Safari để xem các hiệu ứng CSS3 này trông thế nào (xem
                        <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#f7">Hình 7</a>).</p>
<h5 id="f7">
Hình 7. Các cải tiến biểu mẫu Web
                        trong trình duyệt Safari</h5>
<img alt="Một biểu mẫu trả về tương tự cho hình 1, nhưng có các góc làm tròn và hiệu ứng hình bóng hộp" src="https://www.ibm.com/developerworks/vn/edu/wa-html5/fig07.gif" width="500"><p>
Safari dựa trên WebKit đã biểu thị một cách chính xác hiệu ứng các góc
                    tròn và hình bóng hộp, và nó có một hiệu ứng hình ảnh đẹp nhưng đơn
                    giản. Các hiệu ứng tương tự cũng sẽ làm việc trong Mozilla Firefox và
                    Google Chrome. Bạn có thể nhận thấy rằng Safari hỗ trợ tính năng văn
                    bản giữ chỗ và cũng triển khai một thanh trượt (phải nói là sự thay
                    thế đẹp hơn hẳn của Opera) hiện có của kiểu đầu vào phạm vi. Trong
                    phần cuối cùng của hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng phần tử
                    <canvas> và API vẽ 2D để tạo một hình ảnh bitmap mặt cười đơn
                    giản.</p>
<h3 id="N103CB">
Phần tử <canvas> và API
                    vẽ 2D</h3>
<p>
Để bắt đầu với phần tử <canvas>, trước tiên bạn cần phải thêm
                    chính phần tử này vào trang đó. Trực tiếp bên dưới đoạn mã mà bạn đã
                    thêm vào tệp index.html cho biểu mẫu Web trong phần trước, hãy thêm
                    đoạn mã từ Liệt kê 8 <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l8">Liệt kê 8</a>.</p>
<h5 id="l8">
Ví dụ 8. Thêm phần
                        tử <canvas> vào trang này</h5>
<div class="codesection">
<pre class="displaycode"><section>
    <header>
        <h1>
This is an 2D Canvas section</h1>
</header>

<p>
        <canvas id="my_canvas" width="480" height="320"></canvas>
        <div id="no-canvas">
            <p>
You need a Canvas-compatible browser to view this area.</p>
</div>
</p>
</section></pre>
</div>
<p>
Đoạn mã này là tương đối đơn giản. Bạn chỉ cần khai báo phần tử canvas,
                    cho nó một chiều rộng, chiều cao, và một thuộc tính duy nhất ID. Các
                    trình duyệt Mozilla và WebKit có ý kiến khác nhau về việc liệu thẻ
                    <canvas> cần có một thẻ đóng riêng biệt không, nhưng cả hai sẽ
                    được đưa ra cùng một cách, miễn là bạn không đặt bất kỳ đoạn mã nào
                    giữa thẻ mở và đóng. Bạn sẽ sử dụng mã JavaScript để hiển thị các
                    thông báo lỗi no-canvas (không có canvas nào) cho những người dùng các
                    phần tử đó, những người đang sử dụng một trình duyệt không được hỗ trợ
                    vào lúc này.</p>
<p>
Tiếp theo, bạn cần phải thêm mã JavaScript để khai thác các API vẽ 2D
                    để tạo các hình ảnh trên khung nền ảnh (canvas). Trong tệp index.html,
                    ngay trước thẻ </head> đóng gần đầu của tệp, hãy thêm đoạn mã
                    sau (xem <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l9">Liệt kê 9</a>):</p>
<h5 id="l9">
Liệt kê 9. Tạo
                        kịch bản lệnh phần tử canvas</h5>
<div class="codesection">
<pre class="displaycode"><script>
function loadCanvas() {
    var canvas = document.getElementById('my_canvas');
    if(canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(245,160,150,0,Math.PI*2,true);
        ctx.fillStyle = "rgb(255,255,204)";
        ctx.fill();
        ctx.stroke();

ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(200,110,15,0,Math.PI*2,true);
        ctx.fill();

ctx.beginPath();
        ctx.arc(280,110,15,0,Math.PI*2,true);
        ctx.fill();

ctx.beginPath();
        ctx.arc(240,170,20,4,Math.PI*2,true);
        ctx.stroke();

ctx.beginPath();
        ctx.arc(240,190,60,0,Math.PI,false);
        ctx.stroke();
    } else {
        document.getElementById('my_canvas').style.display = 'none';
        document.getElementById('no-canvas').style.display = 'block';
    }
}
</script></pre>
</div>
<p>
<a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l9">Liệt kê 9</a> thêm một khối mã JavaScript vào phần tử đầu
                    trang này, khi định nghĩa một hàm có tên
                    <code>loadCanvas</code>. Hàm này khởi tạo một biến có
                    tên là canvas bằng cách chọn phần tử này có ID duy nhất là my_canvas.
                    Sau đó nó sử dụng một câu lệnh if (nếu) để xác định xem nó có thể nhận
                    được một ngữ cảnh khung nền ảnh từ phần tử này không. Nếu có thể, thì
                    phần tử <canvas> được trình duyệt hỗ trợ; nếu không, thì không
                    có sự hỗ trợ nào cho trình duyệt và khung nền ảnh sẽ được ẩn đi và
                    được thay thế bằng thông báo lỗi. Việc này được nhắc đến trong khối mã
                    khác của câu lệnh if, về phía cuối của hàm này.</p>
<p>
Nếu phát hiện thấy có hỗ trợ canvas, hàm này nhận được một bối cảnh 2D
                    có tên là ctx, thì ngữ cảnh 2D này được dùng để vẽ các hình trên khung
                    nền ảnh. Trong hàm này, có 5 hình được tạo ra. Đầu tiên, gọi hàm
                    <code>ctx.beginPath()</code> để bắt đầu vẽ đường thẳng.
                    Tiếp theo dùng hàm <code>ctx.arc()</code> để vẽ một cung
                    tròn đầy đủ, có bán kính 150 pixels (điểm ảnh), gần trung tâm của
                    khung nền ảnh. Kiểu dáng phủ đầy được thiết lập có màu vàng, trước khi
                    gọi các hàm <code>ctx.fill()</code> và
                    <code>ctx.stroke()</code>, khi tạo một vòng tròn lớn màu
                    vàng có một đường bao màu đen. Đây là khuôn mặt chính.</p>
<p>
Kiểu dáng phủ đầy được thiết lập với màu đen cho các hình tiếp theo
                    được vẽ là đôi mắt. Lúc này vòng tròn khép kín được tạo bằng hàm
                    <code>ctx.arc()</code> có bán kính chỉ khoảng 15 pixels,
                    và gọi hàm <code>ctx.fill()</code> để vẽ chúng.</p>
<p>
Khối mã tiếp theo tạo mũi, đó là một cung tròn không phải là một vòng
                    tròn khép kín và được đặt ở dưới và giữa hai mắt mà chúng ta vừa tạo.
                    Mũi không cần được phủ đầy, do đó, sử dụng hàm
                    <code>ctx.stroke()</code> để thay thế.</p>
<p>
Cuối cùng, một cung nửa vòng tròn lớn được vẽ nhẹ nhàng bên dưới mũi để
                    tạo cái miệng. Kết quả sẽ trông giống nhau trong tất cả các trình
                    duyệt có hỗ trợ phần tử <canvas> (hầu hết các trình duyệt hiện
                    đại bao gồm cả Firefox, Safari, Chrome, và Opera — ngay
                    cả Internet Explorer — có thể hỗ trợ cách vẽ này với sự
                    giúp đỡ của một số thư viện JavaScript thông minh).</p>
<p>
Thay đổi cuối cùng mà bạn cần thực hiện đối với tệp index.html là thay
                    đổi phần tử <body> để gọi hàm
                    <code>loadCanvas()</code> khi cửa sổ đã nạp xong. Đơn
                    giản chỉ cần thay thế thẻ <body> mở bằng dòng sau:
                    <code><body onload="loadCanvas();"></code>.</p>
<p>
Cuối cùng, chỉ cần thêm các quy tắc sau đây vào tệp styles.css để thêm
                    một số hình bóng hộp đẹp mắt vào thùng chứa khung nền ảnh (xem <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#l10">Liệt kê 10</a>).</p>
<h5 id="l10">
Liệt kê 10. Các
                        quy tắc CSS Canvas</h5>
<div class="codesection">
<pre class="displaycode">article > section div#no-canvas {
    display: none;
}

canvas {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
}</pre>
</div>
<p>
Kết quả cuối cùng trông giống như ảnh trong <a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#f8">Hình
                    8</a>.</p>
<h5 id="f8">
Hình 8. Khung nền ảnh mặt
                        cười</h5>
<img alt="Một mặt cười như được mô tả trong các đoạn trước" src="https://www.ibm.com/developerworks/vn/edu/wa-html5/fig08.gif" width="500"><p>
Hình đó đã kết thúc trang mẫu cho hướng dẫn này. Trong phần này, bạn đã
                    sử dụng HTML5 và CSS3 để làm việc với các phần tử ngữ nghĩa HTML5 mới,
                    đã khai thác một số hiệu ứng mới đẹp mắt của CSS3, xem đoạn video
                    trong trình duyệt không có bất kỳ trình cắm thêm flash nào, đã thấy
                    một số widget biểu mẫu mới, và đã tạo một ảnh đồ họa khuôn mặt cười
                    trên một khung nền ảnh bằng cách sử dụng các JavaScript API.</p>
<p class="ibm-ind-link ibm-back-to-top">
<a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#ibm-pcon" class="ibm-anchor-up-link">Về đầu trang</a></p>
<h2 id="N10545">
Tóm tắt</h2>
<p>
Hướng dẫn này dùng như một giới thiệu thực hành về phát triển HTML5 và
                    CSS3. HTML5 có rất nhiều ở giai đoạn đầu phát triển, và thật là thú vị
                    để xem các tính năng mới do nó đề xuất được các nhà cung cấp trình
                    duyệt khác nhau chấp nhận như thế nào. Hiện nay, vì các trình duyệt
                    chủ yếu, Opera, Safari, Firefox và Chrome đang cung cấp sự hỗ trợ để
                    cải tiến hơn nữa với mỗi bản phát hành, và người ta hy vọng sẽ thấy
                    một lượng lớn các tính năng HTML5 được hỗ trợ vào cuối năm 2010.</p>
<p>
Tuy nhiên, một số vấn đề có thể ngăn chặn HTML5 trở nên phổ biến rộng
                    rãi trong tương lai gần. Vấn đề thực sự đầu tiên là thiếu sự hỗ trợ từ
                    Microsoft Internet Explorer, trình duyệt Web được sử dụng rộng rãi
                    nhất trên thị trường. Không chắc các nhà phát triển sẽ có thể thử
                    nghiệm các tính năng HTML5 bất kỳ trên IE cho đến khi phiên bản beta
                    đầu tiên của IE9 được phát hành. Ít nhất vào lúc này, các trang Web
                    phát triển cho HTML5 làm giảm hoàn toàn khả năng tùy chỉnh trên IE8,
                    và với một chút công việc phụ, các thay thế có thể được đưa ra để cung
                    cấp các giải pháp cho người sử dụng IE.</p>
<p>
Một vấn đề chính khác là vấn đề xung quanh các codec video và các thùng
                    chứa. Cứ tình hình thế này, thì các phần tử <video> sẽ không
                    thay thế cho Flash video làm chuẩn video cho Web. Với các trình duyệt
                    khác nhau đang ủng hộ các codec khác nhau, nên để sử dụng Flash vẫn
                    còn dễ dàng hơn nhiều so với mã hóa video của bạn với Theora và H.264.
                    Ở đây hy vọng rằng có một số cách đột phá được thực hiện trong năm nay
                    về video HTML5. Tóm lại, HTML5 và CSS3 là các chuẩn thú vị, và bạn có
                    thể bắt đầu nâng cấp dễ dàng các trang Web của mình cho phù hợp với
                    các đặc tả mới này ngay từ bây giờ. Sau các bước được vạch ra trong
                    hướng dẫn này, bạn cần thành thạo hơn để tiến lên phía trước và khám
                    phá một số tính năng thú vị khác mà HTML5 cần cung cấp.</p>
<p class="ibm-ind-link ibm-back-to-top">
<a href="https://www.ibm.com/developerworks/vn/edu/wa-html5/#ibm-pcon" class="ibm-anchor-up-link">Về đầu trang</a></p>
<h2 id="download">
Tải về</h2>
<table class="ibm-data-table dw-download-table" border="0" cellpadding="0" cellspacing="0"><thead>
<tr><th scope="col">Mô tả</th><th scope="col">Tên</th><th scope="col">Kích thước</th></tr>
</thead><tbody>
<tr><th scope="row" class="ibm-table-row">HTML5 examples</th><td nowrap="nowrap"><a href="http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=774876&filename=html5.examples.zip&method=http&locale=en_VN">html5.examples.zip</a></td><td nowrap="nowrap">3KB</td></tr>
</tbody></table>
</div>
</div>
<h2 id="resources" class="ibm-rule">
Tài nguyên</h2>
<h3 class="dw-resources-category-heading">
Học tập</h3>
<ul class="ibm-bullet-list">
<li> "<a href="http://www.ibm.com/developerworks/xml/library/x-html5xhtml2.html?S_TACT=105AGY75">HTML V5 và XHTML V2</a>" (Adriaan de Jonge, developerWorks, 11.2007):
                Trong lúc mục đích của cả hai HTML V5 và XHTML V2 là để cải thiện các
                phiên bản hiện có, những cách tiếp cận mà các nhà phát triển đã chọn để
                cải tiến chúng rất khác nhau. Và với triết lý khác nhau dẫn đến các kết
                quả khác nhau. Lần đầu tiên trong nhiều năm, hướng phát triển của các
                phiên bản trình duyệt sắp tới là không rõ ràng. Hãy khám phá những bức
                tranh lớn hơn đằng sau các chi tiết của hai tiêu chuẩn này. </li>
<li> "<a href="http://www.ibm.com/developerworks/xml/library/x-html5/?S_TACT=105AGY75">Các phần tử mới trong HTML5</a>" (Elliotte Rusty Harold,
                developerWorks, 08.2007): Một cái nhìn tổng quan về một số các phần tử mới
                trong HTML 5. </li>
<li> "<a href="http://www.ibm.com/developerworks/xml/library/x-mathml3/?S_TACT=105AGY75">Giới thiệu về MathML</a>" (David Carlisle, developerWorks, 12.2009):
                MathML là một khuyến cáo của W3C định nghĩa từ vựng XML để đánh dấu các
                biểu thức toán học. Với HTML 5, hy vọng sẽ có thể đặt MathML trực tiếp
                trên Web mà không cần phải lo lắng về các kiểu mime và các cấu hình máy
                chủ. </li>
<li> "<a href="http://www.ibm.com/developerworks/opensource/library/os-androidiphone1/?S_TACT=105AGY75">Cuộc chiến trình duyệt giữa Android và iPhone, Phần 1: WebKit để giải
                    cứu</a>" (Frank Ableson, developerWorks, 12. 2009): Bài viết này là
                bài đầu tiên trong loạt bài hai phần về phát triển các ứng dụng dựa trên
                trình duyệt cho iPhone và Android. </li>
<li> "<a href="http://www.ibm.com/developerworks/xml/library/x-futhtml1/?S_TACT=105AGY75">Tương lai của HTML, Phần 1: WHATWG</a>" (Ed Dumbill, developerWorks,
                12. 2005): Trong loạt bài hai phần này, Edd Dumbill xem xét các cách khác
                nhau hướng về tương lai cho HTML mà các tác giả Web, các nhà phát triển
                trình duyệt, và các cơ quan tiêu chuẩn đề xuất. </li>
<li><a href="http://www.w3schools.com/html/">Hướng dẫn HTML</a> này từ <a href="http://www.w3schools.com/">w3schools.com</a> dạy cho bạn tất cả
                mọi thứ về HTML. </li>
<li><a href="http://www.w3schools.com/css/">Hướng dẫn CSS</a> này dạy bạn cách
                sử dụng CSS để kiểm soát kiểu dáng và bố trí của tất cả các trang Web cùng
                một lúc. </li>
<li><a href="http://www.w3schools.com/js/">Hướng dẫn JavaScript</a>: Tìm hiểu
                cách sử dụng ngôn ngữ kịch bản lệnh của Web. </li>
<li><a href="http://dev.w3.org/html5/spec/Overview.html">HTML5: Từ vựng và các
                    API liên quan cho HTML và XHTML: Bản dự thảo của người biên soạn
                    13.01.2010</a>: Đọc bản dự thảo của người biên soạn mới nhất về các
                đặc tả HTML5. </li>
<li> Đọc các đoạn trích từ bài <a href="http://diveintohtml5.org/">Đi sâu vào trong HTML5</a> sắp xuất
                bản của Mark Pilgrim từ O'Reilly Media. </li>
<li><a href="http://html5gallery.com/">Phòng trưng bày HTML5</a> là phòng giới
                thiệu về các trang Web đang sử dụng đánh dấu HTML5. </li>
<li><a href="http://www.w3schools.com/html5/html5_reference.asp">Tham chiếu
                    thẻ HTML5</a>: Xem một tài liệu tham khảo theo thứ tự bảng chữ cái cho
                các thẻ HTML5. </li>
<li><a href="http://html5doctor.com/">Trang Web bác sĩ HTML5</a> được tải cùng
                với thông tin để giúp bạn triển khai thực hiện HTML 5 hiện nay. </li>
<li><a href="http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/">Cẩm nang HTML 5</a> liệt kê tất cả các thẻ được hỗ trợ hiện tại,
                những mô tả của chúng, các thuộc tính của chúng, và sự hỗ trợ của chúng
                trong HTML 4. </li>
<li><a href="http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/">Cẩm nang CSS 3</a>: Đây là những tính năng chính của CSS 3 một thẻ có
                khả năng in ấn, tiện dụng. </li>
<li><a href="http://html5demos.com/">Trang Web trình diễn HTML5</a> có các
                liên kết đến các trải nghiệm và các trình diễn HTML 5 khác nhau. </li>
<li> Trình diễn này thể hiện <a href="http://www.youtube.com/html5">tiềm năng trong việc biểu diễn các
                    đồ họa 3D trong trình duyệt</a>, khi sử dụng O3D, một API Web mã nguồn
                mở để tạo các ứng dụng 3D tương tác, phong phú trong trình duyệt. </li>
<li> Đọc xem <a href="http://lifehacker.com/5416100/how-html5-will-change-the-way-you-use-the-web">HTML5 sẽ thay đổi cách bạn sử dụng Web như thế nào</a> từ <a href="http://lifehacker.com">lifehacker.com</a>. </li>
<li><a href="http://sitepoint.com/article/html-5-snapshot-2009/">Đúng, bạn có
                    thể sử dụng HTML5 hôm nay!</a>: Một bài giới thiệu xuất sắc khác về
                thế giới của HTML5. </li>
<li><a href="http://www.css3.info/">css3.info.com</a>:Tất cả mọi thứ bạn cần
                biết về CSS3. </li>
<li><a href="http://www.w3.org/TR/css3-roadmap/">Giới thiệu về CSS3</a>: Đọc
                dự thảo hoạt động W3C về đặc tả sắp tới này. </li>
<li> Bài <a href="http://www.alistapart.com/articles/css3multicolumn">Giới thiệu
                    mô đun nhiều cột CSS3 </a> xem xét mô đun nhiều cột W3C. Mục đích của
                mô đun là để cho phép nội dung chảy vào nhiều cột bên trong một phần tử. </li>
<li> Tìm hiểu về <a href="https://developer.mozilla.org/en/CSS3_Columns">Các cột CSS3</a>
                từ Mozilla.org. </li>
<li><a href="http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/">Các quá trình chuyển tiếp CSS3 và các phép chuyển đổi 2D</a>: Bài
                viết này dạy cho bạn về các quá trình chuyển tiếp và các chuyển đổi CSS3
                trong Opera. Cũng xem các hệ quả SVG và SMIL cho chúng. </li>
<li><a href="https://developer.mozilla.org/en/Canvas_tutorial">Hướng dẫn
                    Canvas</a> này từ Mozilla.org mô tả cách triển khai thực hiện phần tử
                <canvas> trong các trang HTML riêng của bạn. </li>
<li><a href="http://developer.apple.com/mac/library/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Sử dụng Canvas</a> từ Trung tâm của nhà phát triển Apple xem xét các
                ứng dụng dựa trên Safari, Dashboard, và WebKit hỗ trợ cho các đối tượng
                JavaScript canvas, cho phép bạn dễ dàng vẽ nội dung tùy ý trong nội dung
                HTML của bạn. </li>
</ul>
<h3 class="dw-resources-category-heading">
Lấy sản phẩm và công nghệ</h3>
<ul class="ibm-bullet-list">
<li><a href="http://www.theora.org/">Theora</a> là một định dạng nén video
                nguồn mở và miễn phí của Quỹ <a href="http://www.xiph.org">Xiph.org</a>. </li>
<li><a href="http://code.google.com/apis/o3d/">O3D AP</a>: O3D là một API Web
                mã nguồn mở để tạo các ứng dụng 3D tương tác, phong phú trong trình duyệt. </li>
<li> Tải về <a href="http://www.ibm.com/developerworks/downloads/?S_TACT=105AGY75">các phiên bản đánh giá sản phẩm của IBM</a>, và lấy các công cụ phát
                triển ứng dụng thực hành của bạn và các sản phẩm phần mềm trung gian từ
                DB2, Lotus, Rational, Tivoli, và WebSphere </li>
<li> Đổi mới dự án
                phát triển nguồn mở tiếp theo của bạn bằng <a href="http://www.ibm.com/developerworks/downloads/?S_TACT=105AGY75">phần mềm dùng thử của IBM</a>, có sẵn để tải về hoặc trên đĩa DVD. </li>
</ul>
<h3 class="dw-resources-category-heading">
Thảo luận</h3>
<ul class="ibm-bullet-list">
<li> Thảo luận bất cứ điều gì và tất cả mọi
                thứ trên developerWorks trên <a href="http://www.ibm.com/developerworks/blogs/?S_TACT=105AGY75">bộ sưu
                    tập blog của developerWorks</a>. </li>
</ul>

THANH DIEN IT

Thứ Sáu, 22 tháng 1, 2016