Tuesday, March 1, 2011

Learning HTML5 : The Beginning

Learning HTML5 : The Beginning: "



The Brief History



It was begin when Hypertext Markup Language (HTML) founded in 1989 by Tim Berners-Lee. The Internet has been around since 1950s and has the fundamental flaw that to connecting from one disconnecting source to another waas difficult.Tim Berners-Lee addressed this issue by creating two technologies:

  • HTTP the Hypertext Transfer Protocol, a protocol to enable web servers to run.

  • HTML, the Hypertext Markup Language, a scripting language that allow the presentation of the text with embedded links to documents on the same server or a different server.


The challange with today web is not same like what happen in 90′s. The World Wide Web Consortium (W3C) tried addressing the evolution of the HTML standard with a new updated standard called XHTML 2.0. The contributing vendors didn’t fast adapted the technology standard and a subsequent standard, HTML5, developed by the Web Hypertext Application Technology Working Group, is now in active development. The result is XHTML 2.0 has died on the vine, and all of the major technology companies, including Microsoft, are pledging to support HTML5.


New web browser (e.g. Safari, Opera, Chrome and Mozilla) and new Web-enabled device (iPhone, Android, Palm’s Pre and RIM’s) are pushing what can be done on the Web. Each of these competitive companies agrees, that HTML5 is the next standard, they are already supporting it.




New Elements Are Introduce to HTML5



HTML5 introduce new elements to allow you to control your code. Broadly, the new elements covers these main function :

  • Blocking of content on the page

  • Media management

  • Form Structure


The blocking of content in HTML is traditionally accomplished using DIV elements. HTML5 introduces several new elements that allow you to easily insert blocks of content into the page. Conveniently, these new elements have names that identify what the block of the content accomplishes:



  • header

  • section

  • article

  • aside

  • footer

  • nav







And now we can look up the works we’ve done several years ago within today HTML5 comparisons. It is simple as just to replacing a tag that we have mention before. Code below is the html4 popular format in the Web.



<html>
<head>
<title>HTML4</title>
</head>
<body>
<div id="wrapper">
<div id="header">
...
<div id="navigation">...</div>
</div>
<div id="content">
<div id="main_content">
<div class="article">
...
</div>
</div>
<div id="sidebar">
...
</div>
</div>
<div id="footer">
...
</div>
</div>
</body>
</html>

And this is when we make it up with HTML5 tags,



<html>
<head>
<title>HTML5 Format</title>
</head>
<body>
<header>
...
</header>
<nav>
...
</nav>
<section class="content">
<div class="article">
...
</div>
</section>
<aside>
...
</aside>
<footer>
...
</footer>
</div>
</body>
</html>



Face The Block Anyway



These update technology structure is looking to more accurately describe areas of content on the screen. And it is what we called as blocking. We even use it every day as we develop web pages like blog type posting. They must be have at least something like these:

  • Tittle of the blog post

  • Add a date for the post

  • Add link to related content

  • The main content of the blog about was

  • Including figures to the content

  • Possibly add a side note about the content

  • The comment section

  • Including central navigation to the site

  • Adding a header and footer to the page


Using the conventional HTML4 markup technique, you can list all of this information in complex table, paragraph elements (p), or use the Div elements to block content on the page. The following example is an extract from Wikipedia describing HTML5 using HTML4 technique



<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 ref=“/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 aFirst Public Working Draft at the W3C on January 22,2008.</p>

The result :


HTML5 is the next major revision of HTML (Hypertext Markup Language), the core markup language of the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in June 2004 under the name Web Applications 1.0[1]. The W3C adopted the draft in May 2007 as its basis for review. The specification was published as aFirst Public Working Draft at the W3C on January 22,2008.


Unfotunately, the HTML4 approach does not tell much about the data mean. A role of HTML5 is to make syntax more maningful. Using HTML5, you can leverage the new ARTICLE element to block out the section of the page for your main article. Additional emphasis to specify content can be applied using the MARK element. Finally, date/ time information within your HTML can be highlighted using the TIME element.


Here is the same content from www.wikipedia.org, but in HTML5 format.



<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 is the next major revision of HTML (Hypertext Markup Language), the core markup language of the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in June 2004 under the name Web Applications 1.0. The W3C 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.




Making DOC Type Simpler



The first line of HTML in any web page identifies the version of HTML the page contain. This is called the DOCTYPE. The DOCTYPE has its roots tied to SGML. SGML requires a DTD(document type definition) reference to accurately render the web page. With XHTML three different DOCTYPEs were introduced, this was complex to manage.

With HTML5 you have one, simple DOCTYPE, which is

<!DOCTYPE html>
The new DOCTYPE will automatically inform the web browser that the page content is in HTML5. The DOCTYPE is not case sesitive.
"

No comments:

Post a Comment

Comments