HTML5 First look

1. Đường đến HTML5:

Tim Berners-Lee đã phát triển HTML vào năm 1989. Internet bắt đầu xuất hiện từ những năm 1950, nhưng nó có khuyết điểm là việc kết nối từ một nguồn không được kết nối đến một nguồn khác rất khó khăn. Tim đã đưa ra 2 công nghệ để giải quyết vấn đền này:

  • HTTP, một giao thức dịch vụ cho phép chạy các web server.
  • HTML, một ngôn ngữ kịch bản cho phép việc hiển thị text kèm các đường dẫn  được nhúng vào đến các tài liệu nằm trên cùng sever hoặc khác server.

Cuộc cách mạng trên ngôn ngữ HTML của Berners-Lee là ở chỗ liên kết được nhúng vào trong trang web không cần phải biết nếu trang này đang liên kết đã tồn tại. Nếu trang này không tồn tại, khi đó bạn sẽ nhận được một lỗi. Nếu trang web này thực sự tồn tại, bạn sẽ được chuyển từ trang này đến một trang khác.

Lý do thành công thứ hai của HTML là ngôn ngữ này rất dễ học và sử dụng. HTML sử dụng kiến thức cơ bản về các thẻ tag. Ví dụ sau sẽ hiển thị một đoạn văn bản trên trình duyệt:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam ac tortor elit, ac posuere erat. Nullam non
lectus libero, in vestibulum ligula. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nam venenatis faucibus
arcu, consectetur blandit magna pellentesque et.
</p>

Khái niệm tag để viết web rất dễ học và sử dụng. Trước những năm 1990, HTML là một thứ gì đó rất to lớn. Tại thời điếm đó, một sự kiện đã xảy ra: Tim Berners-Lee đã quyết định không dựa vào thành công của web mà thay vào đó là chuẩn hóa các công nghệ Web phổ biến. Tổ chức này, được gọi là World Wide Web Corsortium (W3C; www.w3c.org) là một phần chung chuẩn mở từ các công ty như Apple, Adobe, Sun, Google, Microsoft, IBM, Oracle,… Mục tiêu của W3C là ngăn chặn việc bất kì công ty nào bắt buộc người dùng sử dụng một công nghệ. Điều này là quan trọng, như Microsoft đã từng làm điều này như họ đã thống trị Web từ 1997 đến 2007.

W3C đã cho ra nhiều công nghệ phổ biến được sử dụng bởi nhiều công ty phần mềm hàng ngày. Các công nghệ này bao gồm HTML, XML, SOAP, và định dạng PNG,… Phiên bản HTML đầu tiên của Berners-Lee rất khác biệt so với phiên bản chúng ta dùng ngày nay. Chảng hạn, Berners-Lee đã không quan tâm đến việc thiết kế và không đưa vào bất kì định dạng text trong bản HTML release đầu tiên. Phiên bản release gần đây nhất của chuẩn HTML là vào năm 1997 với tên gọi HTML4.

2. Những điếm mới trong HTML5:

Các phần chính trong HTML5:

  • Core page structure.
  • Visual presentation.
  • Graphical tools.
  • Rich media support.
  • Enhancements to JavaScript.

Các thành phần mới được giới thiệu trong HTML5:

  • HEADER
  • SECTION
  • ARTICLE
  • ASIDE
  • FOOTER
  • NAV

Các thành phần mới này bao quát những chức năng chính là Phân nội dung trên trang web; Quản lý media; Cấu trúc form.

* Phân nội dung trên trang web:

Cấu trúc HTML5 được cập nhật này mộ tả chính xác hơn những khu vực nội dung trên trang web. Nó được gọi là blocking trong HTML5. Chúng ta dùng bloking hàng ngày, một ví dụ của việc dùng blocking là việc post blog. Cấu trúc của một blog có những thứ như thế này:

– Tựa đề của blog.

– Thêm ngày cho bài post.

– Thêm các liên kết cho nội dung liên quan.

– Thêm nội dung vào blog.

– Các phần hổ trợ cho nội dung.

– Thêm header và footer cho một trang.

Các bạn hãy xem qua 2 ví dụ, 1 được viết bằng HTML4, 1 được viết bằng HTML5.

<p><b>HTML5</b> is the next major revision of <a
href=“/wiki/HTML” title=“HTML”>HTML</a> (Hypertext Markup
Language), the core <a href=“/wiki/Markup_language”
title=“Markup language”>markup language</a> of the <a
href=“/wiki/World_Wide_Web” title=“World Wide Web”>World
Wide Web</a>. The <a href=“/wiki/Web_Hypertext_
Application_Technology_Working_Group” title=“Web Hypertext
Application Technology Working Group”>Web Hypertext
Application Technology Working Group</a> (WHATWG) started
work on the specification in June 2004 under the name Web
Applications 1.0<sup id=“cite_ref-0” class=“reference”><a
href=“#cite_note-0”><span>[</span>1<span>]</span></a><
/sup>. The <a href=“/wiki/W3C” title=“W3C” class=“mwredirect”>
W3C</a> adopted the draft in May 2007 as its
basis for review. The specification was published as a
First Public Working Draft at the W3C on January 22,
2008.</p>

HTML4 được hiển thị trên IE9 beta:

html4-demo

Hướng của HTML4 không cho biết nhiều về ngữ nghĩa của dữ liệu. Vai trò của HTML5 là làm cho cú pháp trở nên có ý nghĩa hơn. Sử dụng HTML5, bạn có thể dùng thành phần mới là ARTICLE để phân các phần của một trang cho mục chính của bạn. Việc nhấn mạnh phần nội dung được chỉ định có thể được thực hiện bằng cách dùng thành phần MARK. Cuối cùng, thông tin về ngày/giờ có thể được highlight bằng cách dùng thành phần TIME. Dưới đây là một ví dụ cụ thẻ.

<article>
<m>HTML5</m> is the next major revision of <a href=“/
wiki/HTML” title=“HTML”>HTML</a> (Hypertext Markup
Language), the core <a href=“/wiki/Markup_language”
title=“Markup language”>markup language</a> of the
<a href=“/wiki/World_Wide_Web” title=“World Wide Web”>
World Wide Web</a>. The <a href=“/wiki/Web_Hypertext_
Application_Technology_Working_Group” title=“Web Hypertext
Application Technology Working Group”>Web Hypertext
Application Technology Working Group</a> (WHATWG) started
work on the specification in <time>June 2004</time>
under the name Web Applications 1.0<m><a href=“#cite_
note-0”></m></a>. The <a href=“/wiki/W3C” title=“W3C”
class=“mw-redirect”>W3C</a> adopted the draft in <time>May
2007</time> as its basis for review. The specification was
published as a First Public Working Draft at the W3C on
<time>January 22, 2008</time>.
</article>

HTML5 được hiển thị trên IE9 beta:

html5-demo

Phần hiển thị thì có vẻ tương đối giống, nhưng đoạn code được cấu trúc logic hơn.

3. Những phần không được hỗ trợ trong HTML5:

HTML5 không hỗ trợ một số thành phần trong các phiên bản trước của HTML. Ví dụ, thành phần MARQUEE cho phép bạn tạo text có thể cuộn (scrolling text) trong trang web, bây giờ đã được lượt bỏ. Bạn có thể dùng JavaScript, chuẩn HTML và CSS để thực hiện việc này. Không cần phải giữ lại những thành phần cũ.

Những thành phần dưới đây sẽ không được hỗ trợ trong HTML5:

  • BASEFONT – có thể dùng CSS để làm thay thế.
  • BIG – dùng CSS.
  • CENTER – dùng CSS.
  • FONT – dùng CSS.
  • S – dùng CSS.
  • STRIKE – dùng CSS.
  • TT – dùng CSS.
  • U – dùng CSS.
  • FRAME – dùng iFrame hoặc CSS.
  • FRAMESET – dùng iFrame hoặc CSS.
  • NOFRAMES – dùng iFrame hoặc CSS.
  • ACRONYM – dùng thành phần ABBR.
  • APLLET – dùng thành phần Object.
  • ISINDEX – dùng các FORM control.
  • DIR – dùng thành phần UL list.

Ngoài các thành phần đã bị lượt bỏ, có một số thuộc tính cũng được lượt bỏ, bao gồm:

  • Thuộc tình align trong OPTION, IFRAME, IMG, INPUT, OBJECT, LEGEND, TABLE, HR, DIV, H1, H2, H3, H4, H5, H6, P, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD và TR.
  • Các thuộc tính alink, link, text và vlink trong BODY.
  • Thuộc tính background trong BODY.
  • Thuộc tính bgcolor trong TABLE, TR, TD, TH và BODY.
  • Thuộc tính border trong TABLE, IMG và OBJECT.
  • Các thuộc tính cellpadding và cellspacing trong TABLE.
  • Các thuộc tính char và charoff trong COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD và TR.
  • Thuộc tính clear trong BR.
  • Thuộc tính compact trong DL, MENU, OL và UL.
  • Thuộc tính frame trong TABLE.
  • Thuộc tính frameborder trong IFRAME.
  • Thuộc tính height trong TD và TH.
  • Các thuộc tính hspace và vspace trong IMG và OBJECT.
  • Các thuộc tính marginheight và marginwidth trong IFRAME.
  • Thuộc tính noshade trong HR.
  • Thuộc tính nowrap trong TD và TH.
  • Thuộc tính rules trong TABLE.
  • Thuộc tính scrolling trong IFRAME.
  • Thuộc tính size trong HR, INPUT và SELECT.
  • Thuộc tính type trong OL, UL và LI.
  • Thuộc tính valign trong COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD và TR.
  • Thuộc tính width trong HR, TABLE, TD, TH, COL, COLGROUP và PRE.

4. Làm cách nào để cải tiến các site để hoạt động với chuẩn HTML5 mới:

Modernizr là một giải pháp mã nguồn mở tốt cho phép bạn khám phá cách dùng các công nghệ dựa trên HTML5 và cung cấp các tùy chọn cho các trình duyệt hỗ trợ HTML5 sử dụng các công nghệ HTML4 trước đó mà vẫn hiển thị chính xác trang web. Bạn có thể download tập tin JavaScript cho Modernizr tại www.mordernizr.com. Các tập tin được nén chỉ khoảng 7kb và không chiếm nhiều khoảng trống trong trang web của bạn.

Thêm các tập tin Modernizr vào thư mục root của web site của bạn. Bạn có thể tham chiếu đến chúng từ trang web của bạn như sau:

<!DOCTYPE html>
<html>
<head>
<title>Detecting HTML5 content with Modernizr</title>
<script src=“modernizr.min.js”></script>
</head>
<body>

Với đoạn JavaScript được thêm vào, bạn có thể viết script cho phép bạn hoán đổi qua lại trong HTML5 khi trình duyệt của bạn có thể hỗ trợ nó hoặc thêm vào một định dạng cũ cho các trình duyệt phiên bản cũ. Chẳng hạn, bạn có thành phần INPUT của HTM5 trong trang web của bạn

<input type=“date” name=“DOB” id=“DOB”>

Thêm vào đoạn JavaScript sau để tham chiếu đến Modernizr, và các trình duyệt phiên bản cũ sẽ chuyển các thuộc tính HTML5 với mã Ajax thay thế

if (!Modernizr.inputtypes.date) {
       createDatepicker(document.getElementById(DOB));
}

Bằng cách sử dụng các công cụ như Modernizr đảm bảo rằng tất cả người dùng vào web site của bạn đều có thể xem nội dung và nội dung HTML5 mới đó được trỏ đến đúng đối tượng.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s