Xin chào các bạn! Hôm nay edu.com.vn sẽ hướng dẫn các bạn tìm hiểu về HTML5.Trong năm 2004, một nhóm các nhà phát triển của Apple, Opera,Mozilla không hài lòng với hướng mà HTML và XHTML hướng tới.Họ thành lập một nhóm gọi là Web Hypertext ApplicationTechnology Working Group(WHATWG).Họ công bố đề xuất đầu tiên vào năm 2005 dưới tên Web Application 1,0.Năm 2006,World Wide WebConsortium(W3C)đã quyết định hỗ trợ chính thức WHATWG chứ không phải là tiếp tục phát triển XHTML.Trong năm 2007,các đặc điểm kỹ thuật mới đã được tái bản bởi W3C theo tên HTML5.Trong khi người ta nghĩ rằng các chi tiết kỹ thuật cuối cùng sẽ không được công bố cho đến 2022, thời gian mà bây giờ là được xem xét lại.2009-2010,có một sự quan tâm bùng nổ đến HTML5, và kết quả là tăng số lượng của các trình duyệt và các thiết bị đã được giới thiệu hỗ trợ nó.Chương này đầu tiên sẽ giới thiệu nhiều cấu trúc mới trong các đặc điểm kỷ thuật HTML5.Ngoài ra nó sẽ kiểm tra những thiết bị hỗ trợ cấu trúc html5.
Chương 1: Cấu trúc trang html5
1.1.Khai báo doctype:
Bởi vì có một số phiên bản của HTML, trình duyệt yêu cầu một loại DOCTYPE để nói với nó những gì phiên bản sử dụng và làm thế nào để làm cho nó đúng.Phần này, bạn sẽ học cách hình thành một DOCTYPE cho HTML5.Trong một tài liệu HTML hoặc XHTML truyền thống, thẻ DOCTYPE có thể như sau:
DOCTYPE html PUBLIC “- / / W3C / / DTD XHTML 1.0 Transitional / / EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Và còn có nhiều biến thể của DOCTYPE.
HTML5 giúp đơn giản hoá DOCTYPE :
<DOCTYPE html>
1.2.Tạo khai báo mã hóa kí tự:
Các ngôn ngữ khác nhau sử dụng các bộ ký tự hoặc bảng mã khác nhau. Thẻ này khai báo ký tự được đặt để sử dụng. Các ký tự phổ biến nhất được sử dụng bởi hầu hết các ngôn ngữ là UTF-8.Trong phần này bạn sẽ tìm hiểu làm thế nào để định dạng các ký tự trong HTML5.
Trong hầu hết tài liệu HTML, bạn sẽ thấy các thẻ sau ở đầu:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
Với html5 thì đơn giản hơn nhiều:
<meta charset=”UTF-8″ />
1.3.Tổ chức code sử dụng thành phần tạo khối:
Trong HTML, chỉ thực sự cách để chia nhỏ một tài liệu thành các phần riêng biệt là sử dụng thẻ <div>. HTML5 trình bày một số tùy chọn mới.Trong giải pháp này, bạn sẽ tìm hiểu làm thế nào để sử dụng các thẻ HTML5 mới để tạo ra các phần tài liệu riêng biệt.Các tag HTML <div> thành công phân chia tài liệu thành các phần. Tuy nhiên, <div> từ có rất ít ý nghĩa trong việc xác định các bộ phận của một tài liệu. HTML5 cung cấp một số yếu tố cấu trúc mới phân chia tài liệu thành các phần có ý nghĩa.Với thành phần tạo khối mới của HTML5:
• SECTION
• ARTICLE
• HEADER
• fOOTER
• ASIDE
• FIGURE
• NAV
….
Tên mới cho những thành phần này xác định loại nội dung mà nó tạo khối trên một trang.
1.3.1.Thẻ <section>:
Thẻ này đại diện cho bất kỳ thành phần nào của các tài liệu. Điều này có thể thành phần mô tả sản phẩm, chương, thảo luận, và vv.Trong khi chức năng của nó tương tự như thẻ <div>, nhưng nó cung cấp sự mô tả rõ ràng hơn và nội dung nhạy cảm của việc phân chia tài liệu.Khi tạo một section trong HTML5, giống như khi bạn sử dụng thẻ <div> trong HTML, bạn có thể sử dụng thuộc tính class hoặc là id.Từ khi cả hai huộc tính này có được áp dụng cho bất kỳ thành phần nào của HTML5, chúng được gọi như là thuộc tính toàn cục. Mỗi id phải là duy nhất, như trong HTML, và class có thể được sử dụng nhiều lần để gọi kịch bản hoặc định dạng được xác định trước.Tất cả các thành phần HTML5 có ba loại thuộc tính: toàn cục- là phổ biến cho tất cả các thành phần.thành phần đặc biệt-chỉ áp dụng cho thành phần đặc biệt,và thứ ba là các thuộc tính xử lý sự kiện nội dung-sẽ được kích hoạt tùy thuộc vào nội dung trong tài liệu.
<section id=”mixing”>
<h2>The proper way to mix ingredients</h2>
<p>When using a stand-mixer, it is important that you do not over- mix the ingredients<…/p>
</section>
1.3.2.Thẻ <article>:
Càng ngày, điều quan trọng là làm cho tất cả hoặc một phần của nội dung của một trang được chia. ví dụ đối với diễn đàn,thảo luận, blog, ý kiến độc giả, và …tất cả có thể ứng viên để phân phối hoặc cung cấp thông tin.Trong giải pháp này, chúng tôi sẽ thảo luận về các yếu tố HTML5 mới, <article> </article> thẻ này làm cho thực hiện điều này dễ dàng hơn nhiều hơn so với HTML truyền thống.Mục đích của thẻ này không phải là để phục vụ như là một cách khác để phân của tài liệu của bạn thành các phần.Thay vào đó, nó được sử dụng để xác định của các phần của tài liệu mà bạn muốn được độc lập và phân phối từ các phần còn lại của tài liệu.tag <article> </ article> độc lập, nó có thể có khu vực riêng và các phân khu của nó.Bạn có thể làm của bất kỳ thành phần nào phân phối bởi xung quanh nó với các yếu tố <article> </ article>. Quy định cụ thể nội dung độc lập, khép kín, có thể là một tin tức, bài viết, bài đăng blog, bài diễn đàn, hoặc các sản phẩm khác mà có thể được phân phối độc của với phần còn lại của trang web.
<article>
<section id=”mixing”>
<h2>The proper way to mix ingredients</h2>
<p>When using a stand-mixer, it is important that you do not over mix the ingredients…</p>
</section>
<section id=”baking”>
<h2>Proper baking techniques</h2>
<p> It is important that you bake your cheesecake using a lot of moisture in the oven…</p>
</section>
</article>
1.3.3.Thẻ <Aside>:
Nếu muốn tạo ra một cuộc thảo luận bên trong HTML truyền thống, bạn sử dụng thẻ <div> và sử dụng chính xác của Cascading Style Sheets (CSS) cho vị trí thích của nó. HTML5 làm cho quá trình dễ của của bằng của cung cấp một cấu trúc mới phần tử, <aside> </ aside>. Cũng như thẻ <section>, nó cung cấp một cách mô tả rõ ràng hơn các thành phần trong tài liệu. Đối với nội dung bên cạnh các nội dung chính được đặt. Các nội dung aside có liên quan đến nội dung xung quanh nội dung chính.
<aside style=”font-size:larger;fontstyle:italic; color:blue;float:right; width:120px;” >To create a water bath, use a pan that will allow you to fill it with boiling water that goes halfway up the springform pan in which the cake is placed.
</aside>
1.3.4.Thẻ<header>:
Sử dụng thành phần cấu trúc <header> </ header> để tạo ra một tài liệu hay phần tiêu đề. Nó cũng có thể chứa <h1> <h6>; Bạn cũng có thể sử dụng nó để đặt logo và bảng một phần của nội dung.thành phần<header> </ Header> là một cách dễ dàng để tạo ra giới thiệu cho cả tài liệu và section có thể cả navigation. Bạn không thể sử dụng thành phần <header>
</ header> bên trong <footer>, <address>, hoặc các thành phần<header> khác. Nếu bạn làm thế, kết quả tài liệu sẽ được dựng không đúng.
<header>
<span style=”color:red;font-style:italic;”>
Baking Cheesecakes</span>
<hr>
</header>
1.3.5.Thẻ<hgroup>:
Trong một số trường hợp, bạn có thể muốn vào nhóm thành phần<h1> đến các thành phần <h6> với nhau. Ví dụ, bạn có thể muốn tạo ra một tiêu đề có sử dụng một thành phần <h1>. Sau đó, ngay dưới đó, nơi một phụ đề mà sử dụng các yếu tố <h2>. Trong HTML5, bạn có thể nhóm <h1> và các yếu tố <h2> trong một phần tử cấu trúc mớigọi là <hgroup>.Cấu trúc <hgroup> </ hgroup> cung cấp cho bạn khả năng hiển thị nhóm tiêu đề (<h1> đến<h6>) với nhau cho các nhu cầu như tiêu đề thay thế và phân nhóm. Trong một tài liệu HTML5 được xây dựng tốt, các thành phần<hgroup> </ hgroup> là một cách tuyệt vời để kết hợp chặt chẽ khác nhau nhóm và phân nhóm. Điều này đặc biệt đúng nếu bạn đang sử dụng các thành phần <article> </ article>. Bạn được đảm bảo rằng bất kỳ nhóm và phân nhóm của họ kết nối sẽ di chuyển như là một nhóm.
<hgroup draggable=”true”>
<h1>Cheesecake Tips and Techniques</h1>
<h2>Professional Tips</h2>
</hgroup>
1.3.6.Thẻ <footer>:
Như tên cho thấy, các <footer> </ footer> thành phần sẽ tạo ra chân trang cho các tài liệu HTML5 một bộ phận cấu trúc của tài liệu đó. chân trang có thể chứa thông tin bản quyền, tác giả thông tin,trích dẫn, chính sách bảo mật.Bạn có thể sử dụng các cấu trúc <footer> </ footer> thành phần để tạo ra cuối trang cho một tài liệu HTML5 hoặc bất kỳ section trong tài liệu đó.Các thành phần<footer> không có thể được sử dụng trong các thành phần <header> hoặc trong một thành phần<footer>.Điều này sẽ cho kết quả tài liệu được dựng không đúng như mong muốn.
<footer> © 2011 – Better Made Cheesecakes – All rights reserved </footer>
- 1.3.7.Thẻ <nav>:
Hầu hết các trang web có liên kết điều hướng. Các liên kết, cho dù họ là các siêu liên kết hoặc nút của một số loại,thường được tách ra từ phần còn lại của tài liệu thông qua việc sử dụng của một thành phần <div>.Trong html5 có thành phần dành để xác định thanh dinh hướng đó là <nav></nav>.Kết cấu thành phần <nav> </ nav> có thể được sử dụng để tạo ra một container để tổ chức các yếu tố điều hướng trong toàn bộ tài liệu HTML5 hoặc trong bất kỳ bộ phận nào trong tài liệu.
<nav>
<a href=”/Baking/” target=”_blank”>Baking</a> |
<a href=”/ingredients/” target=”_blank”>Ingredients</a> |
<a href=”/mixing/” target=”_blank”>Mixing</a> |
<a href=”/toppings/” target=”_blank”>Toppings</a>
</nav>
1.3.8.Thẻ <figure>:
Nó là khá phổ biến để chèn hình ảnh, minh họa, sơ đồ, và như vậy vào một trang web.Cho đến nay, một nhà phát triển chỉ có thể chèn một yếu tố <img> bất cứ nơi nào nó là cần thiết. Bây giờ bạn có thể sử dụng đánh dấu chỉ định nơi các con số nên được đặt bằng cách sử dụng thành phần <figure> </ figure> trong HTML5. Các thành phần </ figure> <figure> có thể được sử dụng để tạo ra một container để tổ chức các thành phần mang tính minh họa
trong tài liệu HTML5 hoặc trong bất kỳ bộ phận nào trong tài liệu.Cùng với các yếu tố <figure> mới đến một yếu tố HTML5 mới được gọi là <figcaption></ figcaption> – phần chú thích cho figure. Bạn đặt này trong phần tử <figure> như sau:
<figure>
<img src=”cheescake.jpg” width=”170″ height=”128″ />
<figcaption> Một trong cheesecakes nhiều của chúng tôi </ figcaption>
</figure>
Nếu bạn đặt thành phần <figcaption> dưới hình ảnh, như trong ví dụ trên, nó sẽ xuất hiện
bên phải. Nếu bạn đặt nó ở trên, nó sẽ xuất hiện bên trái.
1.3.9.Thẻ <dialog>:
Cuộc trò chuyện và bình luận được phổ biến trên web.Các yếu tố DIALOG cho số bạn xác định được cuộc trò chuyện trên một màn hình. Có ba phần chính để thẻ DIALOG:
• Yếu tố DIALOG gói xác định một cuộc trò chuyện.
• Thành phần DT xác định các người nói.
• Thành phần DD xác định các cuộc trò chuyện.
<dialog>
<DT>Josie Smith </DT>
<DD>HTML5 is a great way to block semantic elements on a page. </DT>
<DT>Ian Jones </DT>
<DD>Yes, you are absolutely right. </DD>
</dialog>
Chúc các bạn thành công…^^
