Home arrow HTML arrow HTML 5: An Introduction

HTML 5: An Introduction

This article serves as an introduction to HTML 5. This version of HTML is not supported in all browsers. Even some browsers that claim to support HTML 5 do not support all the features available in this version of HTML. Although supporting some/all features of a language is not new to browsers overall, what is new about this is that HTML 5 itself is new, and some of its features are works in progress, especially when it comes to user security. This article is the first of two parts.

Author Info:
By: Ayad Boudiab
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
October 25, 2010
  1. · HTML 5: An Introduction
  2. · HTML 5 Audio and Video

print this article

HTML 5: An Introduction
(Page 1 of 2 )

As far as the browsers are concerned, I am using Firefox 4.0 Beta 6 to test the examples illustrated in this article. The reason for this choice is that Firefox has better support for the HTML 5 features than other browsers (Opera does a good job at supporting HTML 5 as well). To write the HTML code you can use any text editor (I am using Notepad++).

So what is HTML 5 and what does it bring to the table? This new standard of HTML, XHTML, and the HTML DOM was a cooperative work between the W3C and WHATWG (Web Hypertext Application Technology Working Group). HTML 5 contains new features such as canvas, audio and video elements, new content specific elements (like article, header, footer, and section...), new form controls (calendar, date, time, email...), and better support for local offline storage. In the following sections, we will explore some of those elements in detail, using examples where appropriate.

HTML 5 Canvas

A canvas is a rectangular area that is used to draw graphics on the web page. You have control of the pixels inside the box, so you can draw your shapes accurately. However, the canvas does not have drawing abilities of its own. You do the drawings inside JavaScript. Here is how you create a canvas:

AS you can see, we create the canvas tag inside the body tag. There are the usual properties that you use with other HTML tags: id, width, and height. We need the id because we will be using JavaScript's getElementById() method to get the canvas object and do the drawings. We added the style attribute to create a border so we can see the canvas on the screen. As you'll notice, we added text between the opening and closing tags. This text gets displayed on the screen in case the browser does not support the canvas tag.

Now, let's see how we can draw on the canvas. To do so, we added a script tag, got the canvas by id, retrieved its context, and made the drawing. getContext("2d") is a built-in HTML 5 object that has methods to draw different shapes on the screen.

The output for the code above is as follows:

Here is another example that creates a JavaScript function to get the canvas and its context. Then it does some line drawings using the functions moveTo() and LineTo(). Finally, it ties the function to the loading event of the main window:

The canvas will look like the following screen shot:
Don't let these simple drawings fool you. The ability to draw inside the canvas is powerful. You are able to use canvas to transform to scale and translate. In the following example, we will see how to use the ability to draw some text (with a shadow) inside the canvas.

As usual, we get the canvas and its context. Then, we save the current context and restore it at the end so we do not affect upcoming drawings. We set some text and shadow properties, and then we call the method fillText(). Here is a snapshot of the code and the output:


blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials