HTML 5

1. HTML 5 Giới thiệu qua về HTML5

2. HTML5 là chương trình mới nhất cho việc thiết kế Web • Các tính năng video của HTML5 – cho phép đơn giản hoá việc thêm một video vào trang Web, không những thế HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như các nhà phát triển Web. • HTML5 cho phép tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn.

3. Một số phần tử mới • HTML5 vẫn giữ lại các cấu trúc cơ bản như <HEADER>, <FOOTER>, nhưng được bổ sung các phần tử mới, chẳng hạn <CANVAS>, <AUDIO>., <VIDEO>.

4. Các phần tử trong cấu trúc mới • <HEADER>: chứa thông tin giới thiệu của một phần hay một trang hoặc bất cứ thông tin gì của tiêu đề tài liệu hay tiêu đề nội dung của một bảng. • <NAV>: chứa đường liên kết đến trang khác hoặc phần khác trên cùng trang, không nhất thiết chứa tất cả liên kết, chỉ cần đường chuyển hướng chính. • <SECTION>: đại diện cho một phần tài liệu hay ứng dụng, cách thức hoạt động tương tự <DIV>. • <FOOTER>: đánh dấu không chỉ cuối trang hiện hành mà còn mỗi phần có trong trang. Vì vậy, <FOOTER> có thể dùng nhiều lần trong một trang. • <ASIDE>: đại diện cho nội dung có liên quan đến phần tài liệu chính hay các đoạn trích dẫn.

5. Hình bên dưới sẽ giúp bạn thấy rõ hơn cấu trúc mới:

6. Một số đặc điểm mới • Lưu trữ ngoại tuyến: cho phép lưu trữ dữ liệu liên tục hay từng phần mà không cần cài đặt tính năng bổ sung (plug-in) • Miền vẽ cho phép tương tác trực tiếp với hình ảnh, biểu đồ, các đối tượng trong game thông qua các mã lập trình và tương tác người dùng – không cần Flash hay các plug-in. • Tiếp cận các ứng dụng web dễ dàng: chẳng hạn như việc xây dựng các trang wiki, công cụ kéo thả, bảng thảo luận, chat thời gian thực. Việc thực hiện các ứng dụng này sẽ nhanh chóng hơn và chúng có thể làm việc như nhau trên các trình duyệt.

7. Lợi ích mà HTML5 đem lại • Lợi ích to lớn nhất mà HTML5 đem lại là khả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM (Document Object Model – mô hình đối tượng tài liệu hay cây cấu trúc dữ liệu). • Nó là miễn phí và không cần phần mềm Adobe Flash plugin. • Flash có thể làm chậm máy tính của bạn (mặc dù phần mềm tăng tốc phần cứng hardware-accelerated Flash 10.1 - đang trong phiên bản beta – có thể giúp giải quyết vấn đề này). Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống. Với HTML5, tính năng video đã được xây dựng sẵn trong đó. • Ngoài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế Wed dễ dàng hơn trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash. Một số ví dụ về những gì bạn có thể làm với HTML5, CSS3 và một ít hỗ trợ từ JavaScript

8. Một số tiện ích mới của HTML5 • HTML5 làm giảm tầm quan trọng của các plug-ins • HTML5 hỗ trợ đồ họa tương tác • HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file • HTML5 giúp hợp nhất các địa chỉ • HTML5 làm video của Web đẹp hơn • HTML5 có thể tăng khả năng bảo mật • HTML5 đơn giản hóa việc phát triển web

9. Khả năng tương thích HTML5 • Mặc dù HTML5 và CSS3 vẫn chưa được hoàn tất, nhưng chúng đã làm thay đổi bộ mặt của trang Web. Một số trình duyệt - như các phiên bản hiện hành của Safari và Chrome - đã thực hiện một số tính năng từ các phiên bản dự thảo của HTML5 và CSS3. • Một số trang web sử dụng HTML5: CNN.com, The New York Times, YouTube (trong phiên bản beta )

10. Ứng dụng • HTML5 hiện đang được sử dụng trên một số điện thoại có trình duyệt nền tảng Webkit như Palm Pre, iPhone 3Gs, Google Android. • Trình duyệt Firefox 3.5 cũng đã hỗ trợ HTML5 với các thẻ <VIDEO> và <AUDIO>, theo định dạng .ogg. • HTML5 vẫn đang còn là bản dự thảo, nhưng với sự hỗ trợ mạnh mẽ từ các nhà phát triển trình duyệt Google, Apple, Mozilla…

11. Vd thẻ <audio> & <video> • <audio src="sound.mp3" controls></audio> document.getElementById("audio").muted = false; • <video src="movie.mp4" autoplaycontrols></video> document.getElementById("video").play();

12. ….. • Theo như Google công bố thì HTML5 sẽ bắt đầu được sử dụng cho các ứng dụng Web vào tháng 12 năm nay thay vì chỉ sử dụng cho khuôn mẫu Google Gears của riêng nó.

13. Demo cách chèn video • Đơn giản là chèn đường dẫn file video vào thuộc tính src, giống như khi chèn hình ảnh  : <img src =".....">, còn đối với video thì ta chỉ cần thay bằng thẻ <video> : <video src="something.ogv" > </video>

14. …. • Thêm yếu tố cố định chiều rộng và chiều cao cho video width và height. <video src = "something.ogv" width="320" height="240"></video> • HTML5 với thẻ <video> hiện tại thì bạn muốn người truy cập xem được video trên hầu hết các trình duyệt thì bạn cần encode video đó ra 2 định dạng có đuôi là .ogv và .mp4

15. Một số webside su dụng HTML5 http://edition.cnn.com/#fbid=edOjHm9VwHN&wom=false http://www.nytimes.com/