Html 5 Howto

New Input Types in Html5

noreply@blogger.com (Unknown) — Tue, 13 Sep 2011 17:45:00 +0000

Html5 comes with new input types for forms that allows you do a better input control and validation.

Email

This input type ensures that the value entered is a valid email address.

<input type="email">

URL

This input type ensures that the value entered is a valid url.

<input type="url">

Number

The value must be a floating point number. When you enter a value which is not a number, it will be cleared after the focus moves away.

<input type="number">

Date

This input type is for selecting dates.

<input type="date">

Range

This input type allows you to select a value form a range of numbers.

<input type="range" max="100" min="0">

Search

This input type is a search field, same as textbox.

<input type="search">

Html Conditional Comments for Internet Explorer

noreply@blogger.com (Unknown) — Tue, 30 Aug 2011 18:56:00 +0000

Conditional comments are used to detect special versions of browsers. Browser detection is used for browser compatibility and correct rendering. Here are some helpful tables for using "Html Comments";

Comment syntax table:

Comment type	Syntax or possible value
standard HTML comment	<!-- Comment content -->
downlevel-hidden	<!--[if expression]> HTML <![endif]-->
downlevel-revealed	<![if expression]> HTML <![endif]>

Supported features table:

Item	Example	Comment
IE	[if IE]	The string "IE" is a feature corresponding to the version of Internet Explorer used to view the Web page.
value	[if IE 7]	An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version.
WindowsEdition	[if WindowsEdition]	Internet Explorer 8 on Windows 7. The string "WindowsEdition" is a feature corresponding to the edition of Windows used to view the Web page.
value	[if WindowsEdition 1]	An integer corresponding to the edition of Windows used to view the Web page. Returns a Boolean value of true if the value matches the edition being used.
true	[if true]	Always evaluates to true.
false	[if false]	Always evaluates to false.

Operators table:

Item	Example	Comment
!	[if !IE]	The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt	[if lt IE 5.5]	The less-than operator. Returns true if the first argument is less than the second argument.
lte	[if lte IE 6]	The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt	[if gt IE 5]	The greater-than operator. Returns true if the first argument is greater than the second argument.
gte	[if gte IE 7]	The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( )	[if !(IE 7)]	Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
&	[if (gt IE 5)&(lt IE 7)]	The AND operator. Returns true if all subexpressions evaluate to true
\|	[if (IE 6)\|(IE 7)]	The OR operator. Returns true if any of the subexpressions evaluates to true.

Here is an example;

<!--[if IE 9]>
<p>Welcome to Internet Explorer 9.</p>
<![endif]-->

For more information, See: http://msdn.microsoft.com/en-us/library/ms537512.aspx

How to: Draw an Image in HTML5 Canvas

noreply@blogger.com (Unknown) — Sun, 28 Aug 2011 20:43:00 +0000

I will show you an example how to set up a canvas and draw in it using "HTML5 canvas and image object".

First, you must insert a canvas in the html body:

<canvas id="mycanvas" width="200" height="200"></canvas>

Then you can draw the image using 2D canvas context and image object. Like this:

var canvas = document.getElementById('mycanvas');
var drawingContext = canvas.getContext('2d');
var img = new Image();
img.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEBkMVnAtEEzw8S26ScVRKgr4KzU4dsFBwtj-hPKTXgmM2zNYxYErmDligVS6XcWjEem_v_9k1s00Vo8ObVKQtDZV90LYX_J895q6lTJRQwHDsDuOFiPcU9VHBuCMvXgTeEHN_6WKQws/s1600/car-logo.png";
drawingContext.drawImage(img, 50, 50);

In the code above we get the canvas element by using the id. Then we created the 2D context instance by calling getContext function of the context element.

The we created a new image instance and then we assigned the image url to the src property of the Image object.

Finally we draw the image by calling the drawImage() function of the canvas context. The first parameter of the function is an image object, the second is the x-position and the third is the y-position.

Click to draw an image

Html5 Tip: How Can I Reset a Canvas

noreply@blogger.com (Unknown) — Sat, 27 Aug 2011 12:08:00 +0000

Changing the width or height of a canvas element will remove its contents and reset all the properties (like fillstyle) of its drawing context to their default values. You don’t even need to change the width; you can simply set it to its current value, like this:

var canvas = document.getElementById("mycanvas");
canvas.width = canvas.width;

HTML5 Canvas Tag

noreply@blogger.com (Unknown) — Sat, 27 Aug 2011 11:07:00 +0000

The canvas element can be used for rendering graphs, game graphics, or other visual images on the fly. Canvas is currently a "2D" base for drawing on using JavaScript. "3D API" is not supported yet. To use canvas element; you must define the canvas tag and then "draw shapes using Javascript functions".

The definition of the canvas element is like this:

<canvas id="mycanvas" height="200" width="200"></canvas>

this is a blank white space that you can draw. Once you define the tag, you can draw on it using the 2D drawing context. You can get the drawing context using .getContext('2d') function. Using 2D drawing context you can draw rectangle, path, text, gradients and images.

You can "draw a rectangle" like this:

function draw_rectange() {
  var canvas = document.getElementById("mycanvas");
  var drawingContext = canvas.getContext("2d");
  drawingContext.fillStyle = "#FF0000";
  drawingContext.fillRect(40, 30, 120, 80);
}

The fillRect(x, y, width, height) function draws a rectangle filled with the current fill style. x and y are the coordinates where the rectangle will be placed. width and height are the sizes of the rectangle.

The fillStyle property can be "a CSS color", "a pattern", or "a gradient". The default fillStyle is solid black.

Click to draw rectangle

Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> natively.

How to detect HTML5 support

noreply@blogger.com (Unknown) — Fri, 26 Aug 2011 23:31:00 +0000

There are four basic techniques for detecting whether a browser supports a particular feature.

Check if a certain property exists on a global object (such as window or navigator).
Create an element, then check if a certain property exists on that element.
Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
Create an element, set a property to a certain value, then check if the property has retained its value.

Or you can use Modernizr which is an open-source Javascript library that makes it easy for web designers and helps you to detect the capabilities of the visitor’s browser.

Upgrading to HTML5

noreply@blogger.com (Unknown) — Sun, 31 Jul 2011 12:39:00 +0000

This is as simple as changing your doctype. The doctype should be on the first line of every HTML page. In HTML5, the doctype is:

<!DOCTYPE html>

HTML5 doctype won’t break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5.

Html 5 Intoduction

noreply@blogger.com (Unknown) — Sat, 23 Jul 2011 10:32:00 +0000

What is HTML5?

HTML5 is the new standard for HTML, XHTML, and the HTML DOM. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

What are the new features of HTML5?

New features of HTML5 are based on HTML, CSS, DOM and Javascript. There are some new features in HTML5;

- The <canvas> element for making graphics with Javascript.
- The <audio> and <video> element for media streaming and playback.
- Better support for local storage like localStorage and sessionStorage using the Web Storage interface.
- New input types like email, url, number, range and date.
- New form elements like <datalist>, <keygen> and <output>.

Which browsers support HTML5?

No browsers have full HTML5 support.But Safari, Chrome, Firefox, Opera and Internet Explorer continue to add new HTML5 features to their latest versions.