HTML 5 (Part 1) Start from SCRATCH

HTML 5 Start from SCRATCH

Start from SCRATCH

HTML 5 is cover all the facility and features of HTML. So why does this HTML 5? There are some things which doesnt support in HTML. So we will know now what is the advance facility and coding in HTML 5. Till now I have read so many posts on HTML 5 uses, more facility and many more things. But from each article I get just brief overview. So, decided to learn it and spread the knowledge to others with deep knowledge. Let us take a deep look and learn HTML 5.

What is HTML 5 ?
In 1999, there are HTML and HTML 4.01 were invented by W3C. Recently, World Wide Web Consortium (W3C) & the Web Hypertext Application Technology Working Group (WHATWG) invented HTML 5. Before 2006, WHATWG was working on web forms and application, while W3C was working on XHTML 2.0. In 2006, they both W3C and WHATWG decided to create new version of HTML, which have combine feature of WHATEG and W3C. So then HTML 5 is come into existence.

Rules to invent HTML 5

HTML 5 is the combination of HTML, CSS, DOM(Document Object Model) and JavaScript. No need of plugin for .mp4 or .swf files. Mostly scripts replaced by markup language. It is device independent same like HTML. The most desirable feature is that the development is visible to public also.

Basic webpage coding in HTML 5

Let us see the basic HTML 5 web page. Here you can see the declaration is contain only <!doctype> and the basic required tags of HTML 5.

Basic webpage coding in HTML 5

New and Interesting Features of HTML 5

1. 2. 3. You can draw 2D element with <canvas> tag. For media playback, you can use two tags <video> and <audio>. Some content specific elements are used i. e. <header>, <footer>, <section> and <article>. Good form control tags are date, time, email, url, calendar and search.

4.

Some tags are removed from HTML 5

Some elements came in HTML 4.01 are removed in HTML 5 and these are : a) b) c) d) e) f) <acronym> <applet> <basefont> <big> <center> <dir> g) h) i) j) k) l) <font> <frame> <frameset> <noframes> <strike> <tt>

The <canvas> element

It is used to draw graphics on the fly or on the webpage via scripting. The <canvas> element is only the container to store the graphics, but you have to use the script to actually draw the graphics. Canvas has different methods for drawing different shapes like paths, boxes, circles, characters, and adding images.

Note : The browser IE 8 and earlier version do not support <canvas> element.

The <canvas> element

It is the rectangular area on the HTML page and specified with <canvas> element. By default, it has no border and no content. How to write canvas code ?

Do not forget to specify id attribute because later it is use to refer into the script. (You may have more than one canvas element on one webpage, so id is become mandatory.) Define width and height to specify the area of canvas.

The <canvas> element

Use style attribute to add the border to the canvas.

The <canvas> element

Let us see full example :

The <canvas> element

The output look like below :

How to draw on <canvas> element

The next two lines draw a pink rectangle with width 100 and height 150.

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black). The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.

How to draw on <canvas> element

Now let us understand this JavaScript step by step. The first line after <script> tag, this line finds the <canvas> element.

Then the next line, call getContext() method. You must pass the 2D string to the getCotext() method. getContext(2D) is the built in HTML 5 object.

How to draw on <canvas> element

Now let us understand this JavaScript step by step. The first line after <script> tag, this line finds the <canvas> element.

Then the next line, call getContext() method. You must pass the 2D string to the getCotext() method. getContext(2D) is the built in HTML 5 object.

How to draw on <canvas> element

Lets see the full example.

How to draw on <canvas> element

Here is the output.

Coordinates of <canvas> element

The canvas is a two-dimensional grid. The upper-left corner of the canvas has coordinate (0,0). So, the fillRect() method above had the parameters (0,0,100,150). This means : Start at the upper-left corner (0,0) and draw a 100x150 pixels rectangle. Mouse over the rectangle below to see its x and y coordinates:

HTML 5 (Part 1) Start from SCRATCH

Here we see how to make <canvas> and how to draw basic rectangle shape on the canvas. In the next presentation I will show you how to draw path, circle and write text on the canvas.

To be continued