Chào các bạn, như thường lệ ngày thứ 4 hàng tuần sẽ là ngày dành riêng cho những bạn yêu thích về Web. Và từ hôm nay RGB sẽ giới thiệu đến các bạn những loạt bài viết về những tính năng, mẹo, kỹ thuật mới có trong thiết kế website, flash. Qua những bài viết , các bạn có thể được cập nhật thường xuyên những công nghệ mới và có cái nhìn tổng quan hơn về mảng thiết kế còn nhiều điều thú vị này. Ngoài ra, các bạn cũng có thể yêu cầu RGB có những bài viết chuyên sâu về web mà các bạn quan tâm. Hy vọng những chia sẻ cùng những cố gắng của RGB.vn sẽ giúp ích cho các bạn yêu thích và có đam mê mong muốn theo đuổi thiết kế web.
Để mở đầu, LNT xin giới thiệu đến các bạn lần lượt 7 trong số 28 tính năng, mẹo, thủ thuật mới bạn cần biết có trong HTML5. Nhưng trước hết, chúng ta cùng tìm hiểu một cách tổng quan về HTML5 là gì nhé các bạn.
HTML5 là gì
HTML5 là chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản – HyperText Markup Language explained (gọi tắt là HTML). Các phiên bản trước của HTML, như HTML 4.01 đã ra đời từ năm 1999. Cho đến nay các trang web đã có những thay đổi rất nhiều kể từ đó. HTML5 vẫn còn trong giai đoạn phát triển và hoàn thiện. Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có các hỗ trợ cho những phần tử, thẻ mới có trong HTML5 và các APIs.
HTML5 là kết quả của sự hợp tác giữa tổ chức W3C và nhóm WHATWG. WHATWG làm việc với các web form và các ứng dụng, còn W3C thì được làm việc với XHTML 2.0. Trong năm 2006, họ quyết định hợp tác và tạo ra một phiên bản mới của HTML, đó chính là HTML5.
Một số điểm mới có cho HTML5 :
- Các tính năng mới phải dựa trên HTML, CSS, DOM, và JavaScript
- Giảm thiếu nhu cầu sử dụng các plugins bên ngoài (chẳng hạn Flash)
- Xử lý lỗi tốt hơn
- Thêm các thể đánh dấu mới để dần thay thế cho các mã lập trình
- HTML5 hoạt động độc lập
- Quá trình phát triển được chia sẻ rộng rãi.
Và bây giờ chúng ta hãy cùng tìm hiểu 7 tính năng, mẹo và kỹ thuật mới có trong HTML5 là gì nhé.
1. Doctype
Bạn có thể ghi nhớ được toàn bộ đoạn mã khai báo XHTML DOCTYPE trong phiên bản html cũ dưới đây không?
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Hay
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Tất nhiên là không ! Và khi chuyển sang phiên bản HTLM5 việc khai báo của bạn sẽ trở nên đơn giản hơn rất nhiều với chị một dòng mã:
<!DOCTYPE html>
Trong thực tế, Doctype không thực sự cần thiết cho HTML5. Tuy nhiên, nó được sử dụng cho các trình duyệt hiện tại, hoặc những trình duyệt cũ, khi chúng vẫn còn yêu cầu khai báo định rõ kiểu tài liệu là gì. Các trình duyệt không hiểu rằng thẻ DOCTYPE đơn giản là sẽ làm cho các thẻ đánh dấu trở nên quy chuẩn hơn thôi. Vì vậy, không cần lo lắng, hãy vứt bỏ những cảnh báo và nắm lấy DOCTYPE HTML5 mới.
2. Những thành phần minh họa
Cùng xem qua đoạn mã sau:
<img src=”path/to/image” alt=”About image” />
<p>Image of Mars. </p>
Như các bạn thấy, không dễ dàng hoặc đúng ngữ nghĩa để kết hợp chú thích trong thẻ <p> với các yếu tố hình ảnh. HTML5 đã sữa chữa điều này bằng việc cho ra đời thẻ <figure>. Khi kết hợp với phần tử <figcaption> chúng ta có thể đã kết hợp đúng ngữ nghĩa các chú thích với các hình ảnh của mình.
Hãy xem đoạn mã html5 dưới đây:
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. Định nghĩa lại thẻ <small>
Cách đây không lâu, việc sử dụng phần tử thẻ <small> được áp dụng để tạo ra những tiêu đề phụ liên quan đến biểu trưng. Nó thật sự là một phần tử trình bày hữu dụng! Tuy nhiên, ngày nay cách làm trên đã không còn đúng nữa và phần tử <small> đã được định nghĩa lại, thích hợp hơn để sửa dụng trong việc định nghĩa những nội dung nhỏ. Bạn hãy hình dung một cách đơn giản nếu có một thông tin bản quyền nằm ở cuối chân trang web thì theo quy định trong HTML5 chúng ta sẽ sử dụng thẻ <small> để bao gói thông tin này.
The small element now refers to “small print.”
4. Không còn thuộc tính Type trong thẻ Script và Link
Trong những phiên bản html trước đây trong thẻ <script> và <link> bạn cần khai báo thêm thuộc tính type cho chúng. Ví dụ như đoạn mã dưới đây.
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
Thực sự việc khai báo thuộc tính này là không cần thiết. Vì hai thẻ trên đã hàm ý rằng chúng là các thẻ tham chiếu đến stylesheets và các tập mã lệnh. Như vậy, chúng ta có thể hoàn toàn loại bỏ thuộc tính type cho cả hai thẻ này. Ví dụ:
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
5. Cần có dấu nháy đôi hay không?
Nghe giống như đây là một câu hỏi. Tuy nhiên, bạn hãy nhớ HTML5 không phải là XHTML. Bạn không phải đặt các thuộc tính trong những dấu ngoặc kép nếu bạn không muốn. Và bạn cũng không cần phải đóng các thẻ phần tử. Chẳng có gì là không đúng với cách làm như vậy, nếu nó giúp cho bạn cảm thấy thoải mái hơn trong công việc của mình. Tôi nhận thấy điều này là đúng với chính mình.
<p id=someId> Start the reactor.
6. Bổ sung thuộc tính ContentEditable
Những trình duyệt hiện đại có một thuộc tính tiện lợi được gọi là “contenteditable”. Và đúng như tên gọi của nó, thuộc tính này cho phép người dùng có thể chinh sửa bất cứ nội dung text nào được chứa trong một phần tử (thẻ) html, bao gồm cả những phần tử con của nó. Có nhiều cách ứng dụng với thuộc tính này, bao gồm cả một ứng dụng đơn giản như tạo một danh sách công việc phải làm, hay lưu lại nội dung mà bạn đã chỉnh sửa, v.v…
Xem đoạn mã dưới đây:
- <!DOCTYPE html>
- <html lang=”en”>
- <head>
- <meta charset=”utf-8″>
- <title>untitled</title>
- </head>
- <body>
- <h2> To-Do List </h2>
- <ul contenteditable=”true”>
- <li> Break mechanical cab driver. </li>
- <li> Drive to abandoned factory
- <li> Watch video of self </li>
- </ul>
- </body>
- </html>
Thuộc contenteditable gồm có 3 giá trị là False – nội dung không thể được sửa đổi, True – nội dung có thể sửa đổi, và Inherit – Mặc định, là giá trị true hay false phụ thuộc vào phần tử cha chứa nó. Bạn có thể bổ sung thuộc tính này vào bất kỳ phần tử (thẻ) nào trong một tài liệu HTML. Xem một trang demo mà LNT cung cấp để hiểu rõ hơn về thuộc tính này.
7. Email input
Nếu chúng ta áp dụng một kiểu “email” cho các form inputs, chúng ta có thể hướng dẫn trình duyệt chỉ cho phép các chuỗi phù hợp với cấu trúc địa chỉ email hợp lệ. Đây chính là cách xây dựng các form xác nhận. Chúng ta có thể không thể tin cậy 100% điều này đã được thực hiện chưa. Trong các trình duyệt cũ mà không hiểu kiểu “email” này , chúng sẽ rơi vào tình trạng chỉ là một hộp văn bản thông thường.
Cũng cần lưu ý rằng tất cả các trình duyệt hiện tại vẫn còn chưa đáng tin cậy về sự hỗ trợ cho các phần tử và thuộc tính mới. Ví dụ, Opera dường như có hỗ trợ kiểm tra tính hợp lệ của email, miễn là thuộc tính tên được xác định cụ thể. Tuy nhiên, nó không hỗ trợ thuộc tính placeholder.
Còn tiếp…
LNT biên tập từ Net.tutsplus và W3c | RGB.vn
Nhập hội Sáng tạo cùng RGB nha!