Bài 3: Xây dựng trang với web HTML 5

PHP Căn bản | Lập Trình PHP | 28/01/2016 | 5276 |


logo html5

1. HTML 5 là gì?

HTML5 được phát triển dựa trên HTML4 và (X)HTML nên về cơ bản, nó có cấu trúc và cách khai báo không khác nhiều so với 2 phiên bản đó. HTML5, phiên bản mới nhất của Ngôn ngữ đánh dấu siêu văn bản (HTML), là bản hiệu chỉnh triệt để nhất về ngôn ngữ này cho đến nay. Nó giới thiệu nhiều tính năng mới trong nhiều lĩnh vực. Một số trong những bổ sung đáng chú ý hơn cả bao gồm:

2. Các tính năng mới

  • Các thẻ đa phương tiện có sẵn cho âm thanh và video.
  • Một thẻ canvas (khung nền ảnh) để vẽ nội dung trong trình duyệt.
  • Các biểu mẫu thông minh hơn cho phép bạn làm những việc như xác nhận hợp lệ thông qua việc sử dụng một thuộc tính cần thiết.

3. Cấu trúc cơ bản HTML5

Một số thành phần chính trong cấu trúc HTML5 là:

  • header (tiêu đề)
  • section (phần)
  • article (mục)
  • aside (dự trữ)
  • footer (cuối trang)
  • nav (chuyển hướng)

So với HTML 4 thì HTML có cấu trúc đơn giản và rõ ràng hơn nhiều.

Sau đây là một cấu trúc HTML5 cơ bản hoàn chỉnh

<!DOCTYPE html> 
<html> 
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Cấu trúc cơ bản HTML5</title>
</head> 
<body> 
   <header>
      <nav>
         <ul>
            <li>Trang chủ</li>
            <li>Giới thiệu</li>
            <li>Liên hệ</li>
         </ul>
      </nav>
   </header>     
   <section> 
      <article>
         <header>
            <h2>Lập trình php căn bản</h2>
            <p>Ngày đăng: <time datetime="01-01-2016">01/01/2016</time> bởi <a href="#">Lập trình php</a> - <a href="#comments">1 nhận xét</a></p>
         </header>
            <p>Nội dung lập trình php căn bản</p>
     </article>         
     <article>
        <header>
           <h2>Lập trình php nâng cao</h2>
           <p>Ngày đăng: <time datetime="02-01-2016">02/01/2016</time> bởi <a href="#">Lập trình php</a> - <a href="#comments">2 nhận xét<a></p>
        </header>
        <p>Nội dung lập trình php nâng cao</p>
      </article>
   </section>
   <aside>
      <h2>Thông tin thêm về lập trình php</h2>
      <p>Website Tự học lập trình PHP cung cấp các kiến thức từ cơ bản đến nâng cao, hỗ trợ từ A->Z cho các bạn mới bắt đầu tự học lập trình</p>
   </aside>
   <footer>
      <p>Copyright 2016, laptrinhphp.info</p>
   </footer> 
</body> 
</html>

Chúc các bạn tự thiết kế website thành công!!!