[ HTML ] Thiết kế web với HTML 5

Giới thiệu với các bạn tổng quan về thiết kế web với HTML 5

HTML5 là lần sửa đổi tiếp theo của tiêu chuẩn HTML thay thế HTML 4.01, XHTML 1.0, và XHTML 1.1. HTML5 là một tiêu chuẩn cho cấu trúc và trình bày nội dung trên World Wide Web.

Với việc thiết kế web HTML 5 nhằm đáp ứng các phiên bản mới nhất của Apple Safari, Google Chrome, Mozilla Firefox, và Opera tất cả các tính năng hỗ trợ nhiều HTML5 và Internet Explorer 9.0 cũng sẽ có hỗ trợ cho một số chức năng HTML5.

Tính năng mới:

Thiết kế web HTML5 cung cấp một số phần tử mới và các thuộc tính giúp trong việc xây dựng một trang web hiện đại. Sau đây là các tính năng được giới thiệu trong HTML5.

• Các phần tử mới: của các thẻ <header>, <footer>, <section>.
• Form 2.0: Cải tiến cho các hình thức web HTML, nơi thuộc tính mới đã được giới thiệu cho <input> tag.
• Duy trì lưu trữ cục bộ: được thực hiện mà không cần phải dùng đến các plugin của bên thứ ba.
• WebSocket : Một A thế hệ tiếp theo của kỹ thuật truyền thông hai chiều cho các ứng dụng web.
• Server-Sent Events: HTML5 giới thiệu các luồng sự kiện từ máy chủ web tới các trình duyệt web và chúng được gọi là Server-Sent Events (SSE).
• Canvas: Yếu tố này hỗ trợ một giao diện vẽ hai chiều mà bạn có thể lập trình với JavaScript
• Audio & Video: Bạn có thể nhúng âm thanh hoặc video trên các trang web mà không cần phải dùng đến các plugin của bên thứ ba.
• Geolocation: là API cho phép người dùng ó thể chọn để chia sẻ vị trí địa lý của họ với các ứng dụng web của bạn.
• Microdata: Là một cách chuẩn hóa cho phép bạn tạo các từ vựng riêng vượt ra ngoài HTML5 và mở rộng các trang web của với ngữ nghĩa tùy chỉnh.
• Kéo và thả: Kéo và thả các mục từ một vị trí đến một vị trí trên cùng một trang web.

Cú pháp HTML5:

Thiết kế web với ngôn ngữ HTML 5 có một cú pháp HTML "tùy chỉnh" tương thích với các tài liệu HTML 4 và XHTML1 xuất bản trên web, nhưng không tương thích với tính năng bí truyền SGML của HTML 4

Trong việc thiết kế web HTML 5 không có quy tắc cú pháp tương tự như XHTML, nơi chúng ta cần trường hợp tên thẻ thấp hơn, trích dẫn các thuộc tính, một thuộc tính phải có một giá trị và đóng tất cả các thẻ trống.

Tuy nhiên, HTML5 cung cấp nhiều tính linh hoạt và hỗ trợ sau:
• Tên thẻ chữ hoa
• Các trích dẫn là tùy chọn cho thuộc tính.
• Giá trị thuộc tính là tùy chọn.
• Đóng các phần trống là tùy chọn.

DOCTYPE:

Doctypes trong các phiên bản cũ của HTM vẫn còn bởi vì ngôn ngữ HTML dựa trên SGML do đó yêu cầu một tham chiếu đến một DTD.

Soạn thảo tài liệu HTML 5 chúng ta sẽ sử dụng cú pháp đơn giản để xác định DOCTYPE như sau:

<!DOCTYPE html>

Tất cả cú pháp trên là không phân biệt chữ hoa thường.

Mã hóa ký tự:

Người soạn HTML 5 có thể sử dụng cú pháp đơn giản để chỉ ra mã hóa ký tự như sau:

<meta charset="UTF-8">

Tất cả cú pháp trên là không phân biệt chữ hoa thường.

Các phần tử HTML5:

Các phần từ được đánh dấu bằng cách sử dụng các thẻ bắt đầu và thẻ kết thúc. Các thẻ là giới hạn sử dụng dấu ngoặc nhọn với tên thẻ ở giữa.
Sự khác biệt giữa các thẻ bắt đầu và thẻ kết thúc là bao gồm một dấu gạch chéo trước tên thẻ

Dưới đây là một ví dụ phần tử HTML5:

<p>...</p>

Đối với việc thiết kế web HTML 5, tên thẻ HTML5 không phân biệt chữ hoa thường và có thể được viết trong tất cả các trường hợp chữ hoa hay hỗn hợp, mặc dù các quy ước phổ biến nhất là gắn bó với chữ thường.

Hầu hết các phần tử có chứa một số nội dung như <p> ... </ p> có chứa một đoạn văn. Tuy nhiên một số phần tử, không được phép có chứa bất kỳ nội dung nào và chúng được gọi là các phần tử trống. Ví dụ, br, giờ, liên kết và meta.

Các thuộc tính HTML5:

Các phần tử có thể chứa các thuộc tính được sử dụng để thiết lập các thuộc tính khác nhau của một phần tử

Một số thuộc tính được định nghĩa chung và có thể được sử dụng trên bất kỳ phần tử nào, trong khi những phần tử khác được xác định cụ thể. Tất cả các thuộc tính có một tên và một giá trị và giống như trong ví dụ dưới đây.

Sau đây là ví dụ của một thuộc tính HTML5 minh họa làm thế nào để đánh dấu lên một phần tử div với một thuộc tính được đặt tên lớp bằng cách sử dụng một giá trị của "example":

<div class="example">...</div>

Thuộc tính chỉ có thể được quy định trong các thẻ bắt đầu và không bao giờ được sử dụng trong các thẻ kết thúc.

Thuộc tính HTML5 không phân biệt chữ hoa và thường có thể được viết trong tất cả các trường hợp chữ hoa hay hỗn hợp, mặc dù các quy ước phổ biến nhất là gắn bó với chữ thường.

Các sự kiện HTML5:

Khi người dùng truy cập vào trang web của bạn, họ thực hiện công việc như nhấp chuột vào văn bản, hình ảnh và liên kết, v.v. Đây là những ví dụ về những gì JavaScript gọi các sự kiện
.
We can write our event handlers in Javascript of vbscript and can specify these event handlers as a value of event tag attribute. The HTML5 specification defines various event attributes as listed below:

Chúng ta có thể viết các xử lý sự kiện trong Javascript và có thể chỉ định các xử lý sự kiện này như một giá trị của thuộc tính thẻ sự kiện. Các đặc điểm kỹ thuật HTML5 định nghĩa thuộc tính sự kiện khác nhau như được liệt kê dưới đây:

Những thuộc tính sau đây có thể được sử dụng để kích hoạt bất kỳ mã javascript hoặc VBScript được đưa ra là giá trị, khi có bất kỳ sự kiện xảy ra đối với bất phần tử tố HTM5.

Tài liệu HTML5:

Các thẻ dưới đây được giới thiệu cho cấu trúc tốt:
• section: Thẻ này mô tả một tài liệu chung hoặc phần ứng dụng. Nó có thể được sử dụng cùng với thẻ h1-h6 để chỉ ra cấu trúc tài liệu
• article: Thẻ này mô tả cho một phần nội dung của một tài liệu độc lập, chẳng hạn như một entry blog hoặc bài báo.
• aside: Thẻ này mô tả cho một phần nội dung được chỉ liên quan đến phần còn lại của trang
• header: Thẻ này thể hiện tiêu đề của phần đầu trang.
• footer: Thẻ này mô tả một footer cho phần chân trang và có thể chứa thông tin về tác giả, thông tin bản quyền, vân vân
• nav: Thẻ này mô tả cho một phần của các tài liệu dành cho điều hướng
• dialog. Thẻ này có thể được sử dụng để đánh dấu một hộp hội thoại
• figure:. Thẻ này có thể được sử dụng để kết hợp một chú thích cùng với một số nội dung nhúng, chẳng hạn như một hình ảnh hoặc video

Thẻ đánh dấu cho một tài liệu 5 HTM sẽ như sau:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

* Một số khác biệt và cải tiến giữa HTML và HTML5
- HTML5 sẽ là một chuẩn mới thay cho HTML.
- Phiên bản trước của HTML là HTML 4.01 năm 1999. Trải qua thời gian, HTML đã phát triển lên XHTML và giờ đây là HTML5,... chúng có cùng khả năng như HTML nhưng cú pháp chặt chẽ hơn, đơn giản hơn nhưng hiệu quả hơn.
- HTML5 vẫn đang trong quá trình phát triển. Tuy nhiên, trình duyệt chính hỗ trợ nhiều của các phần tử HTML5 và APIs mới

Ví dụ:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5

<!DOCTYPE html>

- HTML VÀ HTML5 SEMANTIC (NGỮ NGHĨA)
Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa. Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”). Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả.

HTML

<body>
<!-- Phần chứa logo -->
<div id="header">HEADER</div>
<!-- Phần chứa menu ngang -->
<div id="nav">NAVIGATION</div>
<!-- Phần thân 2 cột, kiểu 1 -->
<div class="section">
    <!-- Cột trái -->
    <div class="aside">SLIDEBAR LEFT</div>
    <!-- Nội dung chính -->
    <div class="article">CONTENT</div>
</div>
<!-- Phần thân 2 cột, kiểu 2 -->
<div class="section">
    <!-- Nội dung chính -->
    <div class="article">CONTENT</div>
    <!-- Cột phải -->
    <div class="aside">SLIDEBAR RIGHT</div>
</div>
<!-- Phần thân 3 cột, kiểu 1 -->
<div class="section">
    <!-- Cột trái -->
    <div class="aside">SLIDEBAR LEFT</div>
    <!-- Nội dung chính -->
    <div class="article">CONTENT</div>
    <!-- Cột phải -->
    <div class="aside">SLIDEBAR RIGHT</div>
</div>
<!-- Phần thân 3 cột, kiểu 2 -->
<div class="section">
    <!-- Nội dung chính -->
    <div class="article">CONTENT</div>
    <!-- Cột trái -->
    <div class="aside">SLIDEBAR LEFT</div>
    <!-- Cột phải -->
    <div class="aside">SLIDEBAR RIGHT</div>
</div>
<div id="footer">FOOTER</div>
</body>


ĐỊNH NGHĨA HIỂN THỊ XHTML THEO CSS 


-------------------------  

* {
  margin: 0;
  padding: 0;
}
body
{
  margin: 0 auto;
  width: 980px;
  font-family: Arial, Helvetica, sans-serif;
}
#header {
  padding: 10px;
  border: 1px solid #cccccc;
  position: relative;
}
#nav {
  padding: 10px;
  background: #f3f3f3;
  border: 1px solid #cccccc;
  position: relative;
}
.section {
  display: table;
  margin: 5px 0 5px;
  border: 1px solid #cccccc;
}
.section .article {
  display: table-cell;
  padding-right: 22px;
  width: 720px;
}
.section .aside {
  display: table-cell;
  width: 25%;
  background: #f3f3f3;
}
#footer{
  background: #838383;
  border-top: 1px solid #cccccc;
  padding: 10px;
  text-align: center;
  color: #ffffff;
  font-size: 80%;
}

HTML5

<body>
    <!-- Phần chứa logo -->
    <header>HEADER</header>
    <!-- Phần chứa menu ngang -->
    <nav>NAVIGATION</nav>
    <!-- Phần thân 2 cột, kiểu 1 -->
    <section>
        <!-- Cột trái -->
        <aside>SLIDEBAR LEFT</aside>
        <!-- Nội dung chính -->
        <article>CONTENT</article>
    </section>
    <!-- Phần thân 2 cột, kiểu 2 -->
    <section>
        <!-- Nội dung chính -->
        <article>CONTENT</article>
        <!-- Cột phải -->
        <aside>SLIDEBAR RIGHT</aside>
    </section>
    <!-- Phần thân 3 cột, kiểu 1 -->
    <section>
        <!-- Cột trái -->
        <aside>SLIDEBAR LEFT</aside>
        <!-- Nội dung chính -->
        <article>CONTENT</article>
        <!-- Cột phải -->
        <aside>SLIDEBAR RIGHT</aside>
    </section>
    <!-- Phần thân 3 cột, kiểu 2 -->
    <section>
        <!-- Nội dung chính -->
        <article>CONTENT</article>
        <!-- Cột trái -->
        <aside>SLIDEBAR LEFT</aside>
        <!-- Cột phải -->
        <aside>SLIDEBAR RIGHT</aside>
    </section>
    <footer>FOOTER</footer>

</body>





ĐỊNH NGHĨA HIỂN THỊ HTML5 THEO CSS3



-----------------

* {
    margin: 0;
    padding: 0;
}
body
{
    margin: 0 auto;
    width: 980px;
    font-family: Arial, Helvetica, sans-serif;
}
header {
    padding: 10px;
    border: 1px solid #cccccc;
    position: relative;
}
nav {
    padding: 10px;
    background: #f3f3f3;
    border: 1px solid #cccccc;
    position: relative;
}
section {
    display: table;
    margin: 5px 0 5px;
    border: 1px solid #cccccc;
}
section article {
    display: table-cell;
    padding-right: 22px;
    width: 720px;
}
section aside {
    display: table-cell;
    width: 25%;
    background: #f3f3f3;
}
footer{
    background: #838383;
    border-top: 1px solid #cccccc;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    font-size: 80%; 
}