Thứ Hai, 29 tháng 7, 2013

HTML5 - Cảm Ứng Trên Các Thiết Bị Di Động

HTML5 basic, canvas tag, html5 touch
1. Hiện nay các nhà phát triển đang phát triển để HTML5 ngày càng hoàn thiện hơn và trong thời đại hiện nay các thiết bị cảm ứng phát triển mạnh và nhất là các smartphone cảm ứng như Iphone, Sony, HTC, Samsung, Motorola,... 

2. Bên cạnh đó cũng có 1 số thư viện hỗ trợ chúng ta trong việc diễn hoạt và trình diễn trên mobile thông qua các sự kiện “event touch”, chúng ta có thể dựa vào bộ thư viện mà chúng ta yêu thích để phát triển và tùy chỉnh. 

3. Trong HTML5 http://daotaolaptrinh.edu.vn/danh-sach-htmlhiện tại có hỗ trợ một số event touch như sau:
  1. ontouchcancel
  2. ontouchend
  3. ontouchenter
  4. ontouchleave
  5. ontouchmove
  6. ontouchstart


4. Hiện nay có nhiều thư viện hỗ trợ cho các sự kiện touch trên các thiết bị cảm ứng như 
Một số thư viện hỗ trợ sau:
  • 1. Sencha Touch
  • 2. jQuery Mobile
  • 3. Kinetic
  • 4. jQTouch
  • 5. Và một số thư viện khác như DHTMLX Touch, MagicTouch, Titanium,  …

Tùy trưởng hợp và yêu cầu mà chúng ta nên cân nhắc sử dụng những thư viện nói trên:
  • 1. Do yêu cầu của khách hàng
  • 2. Do thư viện này không hỗ trợ mà các thư viện khác hỗ trợ (đòi hỏi phải hiểu nhiều thư viện)
  • 3. Hoặc chúng ta có thể viết thêm để sử dụng những gì mà thư viện không hỗ trợ...


5. So sánh một số ưu điểm và nhược điểm của những thư viện nói trên
  • jQTouch : là dễ dàng để sử dụng . Thích hợp trong việc xây dựng các ứng dụng cho iPhone với HTML, CSS, và JavaScript . jQTouch có một cách tiếp cận tiến bộ cung cấp một thiết lập cơ bản của các vật dụng và hình ảnh động. Tuy nhiên, hiệu suất của thư viện hoạt động không tốt.
  • jQuery Mobile : ra đời vào khoảng tháng 8 năm 2010 , nhưng vẫn được nhiều người biết đến do tính phổ biến, dễ hiểu và được nhiều lập trình viên sử dụng và viết các plugin bổ sung miễn phí. jQuery mobile mạnh hơn jQTouch về mặt hiệu suất, các hiệu ứng chuyển động tốt hơn. Nhưng jQuery mobile chưa được hoàn thiện ở giai đoạn hiện tại vì nó ra đời sau và còn khá non trẻ. Tuy nhiên, trong tương lai gần jQuery mobile có thể là 1 thư viện hỗ trợ mạnh mẽ công nghệ HTML5 cho các thiết bị di động cảm ứng.
  • Sencha Touch : là một thư viện có hiệu suất tốt hơn, bắt buộc sử dụng dữ liệu kiểu Json và tập trung vào việc xử lý các đối tượng DOM thay vì HTML như jQuery mobile và jQTouch.  Theo cộng đồng và tìm hiểu trên mạng thì đây là 1 thư viện tốt nhất hiện nay nhưng lại có tính phí. Việc sử dụng nó với phí l 299$/1 năm là một mặt hạn chế so với xu thế Phần mềm mã nguồn mở hiện nay.
  • Kinetic : là 1 thư viện không tính phí, hoạt động ổn định và hỗ trợ người dùng viết ứng dụng HTML5 trên nền 2D và 3D với 2 phiên bản khác nhau và liên tục được cập nhật. Hỗ trợ mạnh mẽ các diễn hoạt trên nền HTML5, các phương thức quản lý và kiểm soát một đối tượng bất kỳ khi chúng được thêm vào khung vẽ. Tuy nhiên , hiệu suất hoạt động chưa tốt khi thực hiện trên 1 số điện thoại cấu hình thấp.

html5 cơ bản

HTML5 cung cấp:
  • Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng.
  • Tăng cường khả năng truyền thông trên mạng.
  • Cải thiện khả năng lưu trữ chung.
  • Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền.
  • Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú và máy chủ.
  • Truy vấn dữ liệu đã được lưu trữ tốt hơn.
  • Cải thiện tốc độ nạp và lưu trang.
  • Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có nghĩa là  HTML5có thể được định hướng nội dung.
  • Cải thiện xử lý biểu mẫu trình duyệt.
  • Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách..
  • Canvas và video, để thêm đồ họa và video mà không cần cài đặt các plug-in của bên thứ ba.
  • Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám mây di động.
  • Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toán đám mây.
HTML5 tạo ra sự trải nghiệm người dùng hấp dẫn hơn: Các trang được thiết kế bằng HTML5 có thể cung cấp một trải nghiệm giống như với các ứng dụng của máy tính để bàn. HTML5 cũng cung cấp phát triển nhiều nền tảng nâng cao bằng cách kết hợp khả năng của các API với sự có mặt ở khắp mọi nơi của trình duyệt. Khi sử dụng HTML5, các nhà phát triển có thể cung cấp một trải nghiệm ứng dụng hiện đại, trôi chảy qua các nền tảng.
Khi bạn nói HTML5, bạn đang sử dụng phép tốc ký cho sự đổi mới liên tục. Các thẻ mới, các phương thức mới, và một framework phát triển chung dựa trên sự tác động lẫn nhau của HTML5 và hai đối tác của nó, CSS3 và JavaScript. Đây là cốt lõi của hiện tượng xử lý ứng dụng lấy máy khách làm trung tâm. Ngoài các việc triển khai các kỹ thuật và các phương thức của công nghệ HTML5 cho máy tính để bàn, có thể triển khai thực hiện HTML5 trong nhiều trình duyệt điện thoại di động web có tính năng phong phú — một thị trường đang phát triển, khi đã chứng kiến sự phổ biến của các hệ điều hành web Apple iPhone, Google Android, và các điện thoại chạy Palm.
Một khía cạnh quan trọng về sức mạnh của HTML5 là lập bản đồ thông tin — hoặc chặn nội dung, nếu bạn thích — tạo ra một quá trình dễ hiểu hơn nhiều. Bạn có thể thấy công cụ này thích hợp cho việc thiết kế và phát triển hiệu quả như thế nào nhờ ưu thế ngày càng tăng của nó trong thế giới xử lý web.
HTML5 báo hiệu sự ra đời của một quá trình ngữ nghĩa có hiệu quả hơn ở mức văn bản và kiểm soát tốt hơn qua việc xây dựng và sử dụng các biểu mẫu. Tất cả những đặc điểm này và nhiều điểm tốt đẹp khác nữa trong sự đổi mới HTML5 là cơ sở cho sự thống trị ngày càng tăng của mô hình này. Nhiều thực thể cơ quan, thương mại và các tổ chức khác nữa — thậm chí nhiều tổ chức trong số đó hầu như liên quan rất ít đến việc xử lý thông tin và truyền thông như là hoạt động cơ quan chính của họ — theo mức độ này hay mức khác bị tràn ngập bởi sự phát triển của hiện tượng đang phát triển này.
HTML5 không phải là cây đèn thần, và cũng không có gì là thần thánh cả. Tuy nhiên, các tài sản kỹ thuật và phương pháp luận của nó đã biến nó trở thành một thứ tuyệt vời khi bạn muốn tiếp cận.
Bạn sẽ tạo một trang web đơn giản. Trong quá trình này, tôi thảo luận một số thẻ mới đã được đưa vào trong HTML5. Để có hiệu quả cao, bạn phải lập kế hoạch để xem xét tất cả các thành phần bạn muốn chế tạo.
Trang web mà bạn tạo ra sẽ có thiết kế cao cấp được hiển thị trong Hình 1. Thiết kế trang có một vùng Header (Tiêu đề), một vùng Navigation (Chuyển hướng), một vùng Article (Bài viết) có chứa ba Section (phần), một Aside (Nhận xét), và cuối cùng, là vùng Footer (Chân trang). Trang này được thiết kế để làm việc trong trình duyệt Google Chrome, trừ một số thứ lộn xộn thấy được, có thể xảy ra cùng với khả năng tương thích giữa các trình duyệt, bắt nguồn từ việc hiệu chỉnh cũng như cản trở hiểu biết về cấu trúc cơ bản. Mục đích là để tạo ra một trang mô tả rõ ràng việc sử dụng các thẻ HTML5 mới, cho thấy bạn có thể sử dụng chúng như thế nào để tạo ra mã đúng định dạng và thiết kế trang ngắn gọn.

Hình 1. Kế hoạch trang web của Acme United 
Hộp có các hộp nhỏ hơn bên trong nó hiển thị các thành phần khác nhau của trang. 
Vùng Header
Vùng Header ví dụ chứa tiêu đề và phụ đề trang. Bạn sử dụng thẻ <header> để tạo ra nội dung cho vùng Header của trang. Thẻ<header> có thể chứa thông tin mở về một <section> và <article> ngoài chính trang web đó. Trang web được tạo ra ở đây có một vùng Header cho trang này, được hiển thị trong thiết kế cao cấp, cũng như vùng Header ở bên trong vùng Article và Section. Liệt kê 1 đưa ra một ví dụ đánh dấu thẻ <header>.

Liệt kê 1. Ví dụ thẻ <header>
 
<header>
    <h1>Heading Text</h1>
    <p> Text or images can be included here</p>
    <p> Logos are frequently placed here too</p>
</header>

Thẻ <header> cũng có thể chứa một thẻ <hgroup>, như trong Liệt kê 2. Thẻ <hgroup> tạo nhóm các tiêu đề với nhau, bằng cách sử dụng các mức tiêu đề <h1> đến <h6> được hiển thị ở đây có một tiêu đề chính (Main Heading) và một phụ đề (Sub-heading).

Liệt kê 2. Ví dụ thẻ <hgroup> 
 
<header>
    <hgroup>
          <h1>Main Heading</h1>
          <h2>Sub-heading </h2>
    </hgroup>
    <p> Text or images can be included here</p>
</header>

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

Liệt kê 3. Ví dụ thẻ <nav> 
 
<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Products</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>
Các vùng Article và Section
Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sự của trang. Bạn sử dụng thẻ <article> để tạo vùng này, và thẻ đó định nghĩa nội dung có thể được sử dụng độc lập với các nội dung khác được tìm thấy trên trang này. Ví dụ, nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng <article> để xác định nội dung duy nhất. Thẻ<article> xác định nội dung có thể được gỡ bỏ và được đặt trong ngữ cảnh khác và có thể hoàn toàn dễ hiểu.
Vùng Article trong kế hoạch của Acme United có chứa ba vùng Section. Bạn tạo ra các vùng này bằng cách sử dụng thẻ<section>. Một <section> chứa các vùng thành phần của nội dung trang web có liên quan . Thẻ <section> — và thẻ<article> nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất kỳ các thành phần nào khác cần thiết để hoàn thành phần này. Thẻ <section> dùng cho nội dung tạo nhóm. Nội dung cho cả hai thẻ <section> và thẻ <article>thường bắt đầu bằng một <header> và kết thúc bằng một <footer>, với nội dung cho thẻ này ở giữa.
Thẻ <section> cũng có thể chứa các thẻ <article>, cũng giống như thẻ <article> có thể chứa các thẻ <section>. Thẻ<section> nên được dùng để tạo nhóm các thông tin giống nhau, và thẻ <article> nên được sử dụng cho các thông tin như một bài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới mà không ảnh hưởng đến ý nghĩa của nội dung. Thẻ <article> như tên gọi của nó, cung cấp một gói thông tin đầy đủ. Ngược lại, thẻ <section> chứa thông tin liên quan, trừ thông tin không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó sẽ bị mất.
Xem Liệt kê 4 với một ví dụ về cách sử dụng thẻ <article> và <section>.

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

Cả hai thẻ <section> và thẻ <article> cũng như thẻ <header> và thẻ <footer> có thể chứa thẻ <figure>. Bạn sử dụng thẻ này để chứa các ảnh, các sơ đồ, và các ảnh chụp.
Thẻ <figure> có thể chứa thẻ <figcaption>, thẻ này chứa lần lượt các chú thích cho hình minh họa có trong thẻ <figure>, cho phép bạn nhập một mô tả để có thể gắn hình minh họa chặt chẽ hơn với nội dung. Liệt kê 5 đưa ra một ví dụ về cấu trúc thẻ<figure> và thẻ <figcaption>.
 
<figure>
     <img src="/figure.jpg" width="304" height="228" alt="Picture">
     <figcaption>Caption for the figure</figcaption>
</figure>

Các thẻ <section> và <article> cũng có thể chứa các phần tử phương tiện khác nhau. HTML5 cung cấp các thẻ để truyền đạt nhanh nội dung của chúng. Các phần tử đa phương tiện, chẳng hạn như âm thanh và video trước đây thường chỉ được nhúng vào, bây giờ có thể được sử dụng chính thống hơn.
Thẻ <audio> xác định nội dung âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác bất kỳ. Thẻ <audio> có các thuộc tính để kiểm soát những gì, khi nào, và làm thế nào để phát âm thanh. Các thuộc tính là srcpreload (nạp trước), control(điều khiển), loop (vòng lặp), và autoplay (phát tự động). Trong ví dụ ở Liệt kê 6, âm thanh bắt đầu phát ngay sau khi tải trang này và sẽ phát liên tục, đồng thời hiển thị các nút điều khiển để người dùng có thể dừng lại hoặc phát lại âm thanh.
 
<audio src="MyFirstMusic.ogg" controls autoplay loop>
     Your browser does not support the audio tag.
</audio>

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

Các thẻ <video> và <audio> có thể chứa thẻ <Source>, để định nghĩa tài nguyên đa phương tiện cho các thẻ <video> và<audio>. Với phần tử này, bạn định rõ các tệp video và âm thanh thay thế để từ các tệp này sau đó trình duyệt có thể lựa chọn dựa vào kiểu phương tiện của mình hoặc sự hỗ trợ của codec (bộ mã hóa/giải mã). Trong Liệt kê 8, có hai sự lựa chọn. Nếu không thể phát phiên bản WMA của tệp này trong trình duyệt đang được sử dụng, thì hãy thử MP3. Nếu không, sẽ hiển thị thông báo để người sử dụng biết lý do âm thanh không có sẵn.
 
<audio>
     <source src="/music/good_enough.wma" type="audio/x-ms-wma">
     <source src="/music/good_enough.mp3" type="audio/mpeg">
     <p>Your browser does not support the HTML 'audio' element.</p>
</audio>

Thẻ <embed> định nghĩa nội dung nhúng có thể được đưa vào một trang — ví dụ, một plug-in cho các tệp SWF của Adobe Flash. Liệt kê 9 có chứa thuộc tính type (kiểu), xác định nguồn nhúng là một tệp Flash.
 
<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

Ngoài các thuộc tính src và type, thẻ <embed> còn có thuộc tính height (chiều cao) và width (chiều rộng).
Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ <aside>. Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào để thêm vào bài viết. Trong các tạp chí, các vùng nhận xét thường được sử dụng để làm nổi bật một điểm nào đó và được thực hiện trong chính bài viết đó. Thẻ <aside> chứa nội dung có thể được loại bỏ mà không ảnh hưởng đến các thông tin được truyền đạt bởi bài viết, phân đoạn, hoặc trang chứa nó.
Liệt kê 10 đưa ra một ví dụ về cách sử dụng thẻ <aside>.
 
<p>My family and I visited Euro Disney last year.</p>
<aside>
     <h4>Disney in France</h4>
     <p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>
Phần tử <footer> chứa thông tin về một trang, bài viết, hoặc một phần, chẳng hạn như tác giả hoặc ngày viết bài. Là phần cuối trang, nó có thể chứa bản quyền hoặc các thông tin pháp lý quan trọng khác, như trong Liệt kê 11.
 
<footer>
     <p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>

Liệt kê 12. Ví dụ thẻ <!doctype>
 
<!doctype html>
<html lang="en">

Sau khi chỉ ra nội dung là html và ngôn ngữ tiếng Anh, bạn có phần tử <head>, có thể chứa các đoạn script (kịch bản lệnh), thông tin hỗ trợ trình duyệt, các liên kết bảng định kiểu, siêu thông tin, và các hàm khởi tạo khác. Bạn có thể sử dụng các thẻ sau trong phần head:
  • <base>
  • <link>
  • <meta>
  • <script>
  • <style>
  • <title>
Thẻ <title> (đầu đề) là nơi chứa tiêu đề hiện tại của trang và là một phần tử của phần <head> cần thiết. Đó là tiêu đề mà bạn nhìn thấy ở phía trên cùng của trình duyệt khi xem trang. Thẻ <link> trong Liệt kê 13 xác định bảng định kiểu CSS3 sẽ được sử dụng để biểu thị trang HTML5. Bảng định kiểu được gọi là main-stylesheet.css.

Liệt kê 13. Ví dụ thẻ <head> 
 
<head>
     <title>HTML5 Fundamentals Example</title>
     <link rel="stylesheet" href="main-stylesheet.css"  />
</head>

Tiếp theo, bạn sử dụng thẻ <body>, ngay sau các thẻ <header> và <hgroup>, được mô tả ở trên. Vùng <h1> trong ví dụ này chứa tên của công ty của bạn, giả sử là Acme United, và vùng <h2> chứa các thông tin thông báo cho bạn rằng đó là phụ đề "A Simple HTML5 Example". Liệt kê 14 mô tả điều này.

Liệt kê 14. Ví dụ thẻ <body> và thẻ <header> 
 
<body >
     <header>
          <hgroup>
               <h1>Acme United</h1>
               <h2>A Simple HTML5 Example</h2>
          </hgroup>
     </header>

Cho đến nay CSS3 thường dùng để thiết lập trang được hiển thị trong Liệt kê 15. Trước tiên, bạn thiết lập phông chữ cho trang, sau đó đến các chi tiết cho phần thân. Bạn định nghĩa các kích thước của phần thân, rồi thiết kế cấu trúc đoạn tiêu đề cho các thẻ tiêu đề cấp đầu tiên và cấp thứ hai. Đây là các tiêu đề mà bạn sẽ sử dụng cho trang này.

Liệt kê 15. ví dụ CSS3 #1
 
* {
 font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
 width: 800px;
 margin: 0em auto;
}

header h1 {
 font-size: 50px;
 margin: 0px;
 color: #006;
}

header h2 {
 font-size: 15px;
 margin: 0px;
 color: #99f;
 font-style: italic;
}

Liệt kê 16 hiển thị thẻ <nav>, được thiết kế để xử lý chuyển hướng trang web chính.

Liệt kê 16. Ví dụ thẻ <nav> 
 
<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

HTML5 cũng có một thẻ <menu> — một thẻ đã gây ra sự nhầm lẫn đối với một số nhà thiết kế và phát triển. Sự nhầm lẫn bắt nguồn từ thực tế hiểu lầm rằng việc chuyển hướng này là "navigation menu". Thẻ <menu>, đã bị phản đối trong HTML kể từ phiên bản 4.01 và giờ đây được tái sinh trong HTML5, được thiết kế để tăng cường tính tương tác. Không nên sử dụng nó cho việc chuyển hướng chính. Thẻ duy nhất nên được sử dụng cho việc chuyển hướng chính là thẻ <nav>. Bạn sẽ sử dụng thẻ <menu>sau trong ví dụ này.
Định dạng của chuyển hướng được CSS3 xử lý. Mỗi định nghĩa thẻ <nav> được hiển thị trong Liệt kê 17 đại diện cho một trạng thái cụ thể của các phần tử <ul> và <li> bên trong thẻ <nav>.

Liệt kê 17. Ví dụ CSS3 #2
 
nav ul {
 list-style: none;
 padding: 0px;
 display: block;
 clear: right;
 background-color: #99f;
 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: #006;
 text-decoration: none;
 font-size: 13px;
 font-weight: bold;
}

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

Tiếp theo là vùng Article. Vùng này, được định nghĩa bằng thẻ <article>, chứa thông tin <header> riêng của mình. Thẻ<section> có trong thẻ <article> cũng chứa một thẻ <header> riêng của mình. Xem Liệt kê 18.

Liệt kê 18. Ví dụ thẻ <article> và <section>
 
<article>
     <header>
          <h1>
               <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
          </h1>
     </header>
     <p> Primum non nocere ad vitam Paramus . . . </p>
     <section>
          <header>
               <h1>This is the first section heading</h1>
          </header>
          <p>Scientia potentia est qua nocent docentp . . .</p>
     </section>

Liệt kê 19 cho thấy cách đánh dấu CSS3 để biểu thị ra định dạng này. Lưu ý rằng định nghĩa cho các vùng paragraph (đoạn),header, và section tất cả đều được định nghĩa cho thẻ <article> có chứa chúng trong đó. Thẻ <h1> được định nghĩa ở đây không có cùng định dạng như thẻ <h1> đã được định nghĩa ở mức page (page-level).

Liệt kê 19. Ví dụ CSS3 #3http://huongdanhochtmscss.blogspot.com/p/css.html
 
article > header h1 {
 font-size: 40px;
 float: left;
 margin-left: 14px;
}

article > header h1 a {
 color: #000090;
 text-decoration: none;
}

article > section header h1 {
 font-size: 20px;
 margin-left: 25px;
}

article p {
 clear: both;
 margin-top: 0px;
 margin-left: 50px;
}

Thẻ <section> thứ hai trong <article> chứa cùng thông tin cơ bản như <section> đầu tiên, nhưng lần này bạn sẽ sử dụng một thẻ <aside>, một thẻ <figure>, một thẻ <menu> >, và một thẻ <mark>. Xem Liệt kê 20.
Thẻ <aside> được sử dụng ở đây để trình bày thông tin không phải là một phần của luồng quanh nó. Thẻ <figure> chứa một ảnh đồ họa của Stonehenge. Thẻ <section> này cũng chứa thẻ <menu>, mà bạn sử dụng để tạo các button có các tên là 4 Muse. Khi một trong các nút này được nhấn, nó cung cấp thông tin về Muse cụ thể. Thẻ <mark> được sử dụng bên trong thẻ <p>để làm nổi bật các từ veni, vidi, vici.

Liệt kê 20. Ví dụ thẻ <article> và <section> 
 
<section>
     <header>
          <h1>Second section with mark, aside, menu & figure</h1>
     </header>
     <p class="next-to-aside"> . . .  <mark>veni, vidi, vici</mark>. Mater . . .</p>
     <aside>
          <p>This is an aside that has multiple lines. . . .</p>
     </aside>
     <menu label="File">
          <button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
          <button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button>
          <button type="button" onClick="JavaScript:alert
                             ('Urania . . .')">Urania</button>
          <button type="button" onClick="JavaScript:alert
                             ('Calliope . . .')">Calliope</button>
     </menu> 
     <figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
          <figcaption>Figure 1. Stonehenge</figcaption>
     </figure>
</section>

CSS3 cho phần này đã có một định nghĩa mới cho thẻ <p> có chiều rộng ngắn hơn chiều rộng mà bạn đặt cho trang này. Sự thay đổi này cho phép hiển thị những nhận xét bắt đầu ở bên phải chứ không đè lên văn bản. Liệt kê 21 cho thấy cách đánh dấu này.

Liệt kê 21. Ví dụ CSS3 #4
 
article p.next-to-aside {
 width: 500px;
}

article >  section figure {
 margin-left: 180px;
 margin-bottom: 30px;
}

article > section > menu {  
 margin-left: 120px;
}   

aside p {  
        position:relative;
        left:0px;
        top: -100px;
  z-index: 1;
        width: 200px;  
     float: right;
     font-style: italic; 
        color: #99f;
}  

Đây là thành phần cuối cùng của phần tử <article>: phần video. Video ví dụ là một định dạng ogg tự động phát khi trang được tải, phát liên tục, và cung cấp các nút điều khiển để tạm dừng và phát. Ngày nay, có nhiều trường hợp các video định dạng ogg sử dụng phần mở rộng ogv (v cho video), như trong Liệt kê 22. Thẻ <audio> làm việc theo cùng cách này.

Liệt kê 22. Ví dụ <article> và <section> 
 
     <section>
          <header>
               <h1>This is a video section</h1>
          </header>
          <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" 
                                controls autoplay loop>
                <div class="no-html5-video"><p>This video will work in 
                                Mozilla Firefox or Google Chrome only. </p>
                </div>
          </video></p>
     </section>
</article>

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

Liệt kê 23. Ví dụ CSS3 #5
 
article > section video {
 height: 200px;
 margin-left: 180px;
}
 
article > section div.no-html5-video{
 height: 20px;
 text-align: center;
 color: #000090;
 font-size: 13px;
 font-style: italic;
 font-weight: bold ;
 background-color: #99f;
}   

Phần tử footer và kết thúc trang này được hiển thị trong Liệt kê 24.

Liệt kê 24. Ví dụ thẻ <footer> 
 
          <footer>
              <p>Copyright: 2011 Acme United. All rights reserved.</p>
          </footer>
     </body>
</html>   

CSS3 cho phần tử footer được hiển thị trong Liệt kê 25.

Liệt kê 25. Ví dụ CSS3 #5
 
footer p {
 text-align: center;
 font-size: 12px;
 color: #888;
 margin-top: 24px;
}

Việc hoàn thành trang web của bạn cũng kết thúc phần đầu tiên của loạt bài này. Mục tiêu của bài viết này là giới thiệu phiên bản HTML5 mới. HTML5 còn có nhiều điều thú vị hơn chỉ đơn thuần là một bản nâng cấp cho HTML4: Đó là cách mới để truyền thông kỹ thuật số. Với chức năng của CSS3 và JavaScript, HTML5 mang lại cho các nhà phát triển mọi thứ trong một gói-mã-giả. Nếu bạn sẵn sàng hấp thụ những gì mà bạn cần từ một lượng lớn thông tin HTML5 ngoài thông tin hiện có để sử dụng chung của chúng ta, thì bạn sẽ gia nhập vào đội ngũ các nhà phát triển và các nhà thiết kế web đa phương tiện HTML5 giỏi không ngừng gia tăng. Phần tiếp theo của loạt bài này sẽ xem xét cách mã hóa và định dạng các biểu mẫu HTML5.