Bài 1: Thực hành code một trang web đơn "page template" với css3 và html 5.

Hôm nay, chúng tôi đang làm cho một mẫu web HTML5, sử dụng một số tính năng mới được đưa ra bởi CSS3 và jQuery, với scrollTo plug-in.
Chức năng của template này  như sau:
 Tạo một website có hiệu ứng tác động vào các phần tử bố cục của html5 với thư viện Jquery scrollTo .
Khi click vào menu các phần tử bố cục của một nội dung sẽ trôi lên chính xác.

Bước 1: The design
Bước 2: Code HTML
Cần lưu ý Html5 vẫn đang trong giai đoạn phát triển, tuy nhiên đã có một số phần tử chuẩn.
Trong hướng dẫn này, chúng tôi đang sử dụng một trong số các thẻ được giới thiệu với phiên bản mới này của HTML: 
- header: thẻ bao tiêu đề của trang
- footer: thẻ bao chân trang
- section: thẻ bao bố cục (content, sidebar, vv...)
- article: thẻ bao bọc từng phần nội dung trong thẻ bố cục.
- nav: chứa các trình đơn menu của trang
- figure: thường chứa một hình ảnh được sử dụng như là một minh hoạ cho bài viết của bạn.
HTML5 có tác dụng: kết quả của nội dung hiệu quả hơn và cải thiện hiệu suất. Một khi HTML5 được áp dụng trên diện rộng, các trang web sẽ bắt đầu chạy nhanh hơn, băng thông sẽ tốn ít hơn khi được và thời gian “thọ” của pin trên các thiết bị di động sẽ được kéo dài hơn.
Bước3: Css
Tự code
CSS
- Thuộc tính position: relative; định vị trí cho thành phần phụ thuộc vào thành phần bao ngoài.
- thuộc tính position: absolute; định vị trí phụ thuộc vào thành phần bao ngoài relative, vùng xử lý của thành phần sẽ phụ thuộc vào nội dung
của thành phần.
Bước 4: Jquery
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

$('nav a,footer a.up').click(function(e){

// If a link has been clicked, scroll the page to the link's hash target:

$.scrollTo( this.hash || 0, 2000);
e.preventDefault();
});


});

Danh sách các thuộc tính đầy đủ cho đối tượng location này:

hash: thiết lập hoặc lấy phần sau dấu # của URL
host: thiết lập hoặc lấy hostname và port number của URL
hostname: thiết lập hoặc lấy hostname
href: thiết lập hoặc lấy URL
origin: trả về protocal, hostname và port number của URL
pathname: thiết lập hoặc lấy path name của URL
port: thiết lập hoặc lấy port của URL
search: lấy phần query string của URL

Note: thư viện jquery.scrollTo-min.js có tác dụng với thẻ html với cấu trúc sau:
-  <li><a href="#article1">Photoshoot</a></li> phần tử được click.
-  <div id="article1"></div> phần tử bị tác động bởi click:
==> quan hệ ở 2 phần tử trên bởi "#article1" - "article1", hash: thiết lập hoặc lấy phần sau dấu # của URL.
Các kết quả khi sử dụng thư viện jquery scrollTo : xem tham khảo tại link sau
http://demos.flesler.com/jquery/scrollTo/