HTML 5

Hi All, 

This week I am coming up to your with a New and Interesting topic i.e., HTML5.

       HTML5 is an exciting and powerful standard for the development of advanced web pages. It offers the ability for web designers to integrate many convenient and flexible features into their web pages and greatly enhances the enjoyment and effectiveness of these sites.
        They have been developed by some very talented web designers and offer a great deal of information and support in terms of being able to adopt and use the HTML5 standard.

Features of HTML5

This the latest version have been considered as the new platform for streaming video capabilities into browser applications. JavaFX, Adobe Flash and Microsoft Silverlight obsolete are some of the potential plug-ins that can be used with this language.

It comes endowed with many interesting features like:

• Canvas technology: To draw graphics on web page, JavaScript has been used. Here are some of the drawing methods like circles, paths, boxes, characters and images that have been used by canvas element.
• Web videos: These days, most video are shown by plug-ins like Flash. HTML5 includes standard way with the video element for quality videos.
• Audio on web: mostly, all audios are played using plug-ins like Flash whereas, HTML5 indicate standard audio element to play sound files.
• Web Storage: There are two methods namely session storage and local storage used for storing data without any effect the website's performance.

Some Interesting Examples on HTML5 

Videos on the Web

       It is easy to embed videos in to webpage just using a simple <video> tag.Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.HTML5 defines a new element which specifies a standard way to embed a video/movie on a web.

Example

Source Code:

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />  
</video>

Support: IE 9,Chrome 6,Safari 5

New Input Types

Input type Email
      We have to make a hard coding to validate an email address to satisfy all then standard type. usually we use Regular Expressions to validate the Email. But now HTML5 will provides email type input by which our life will makes easier to validate the field.

Example:

E-mail:

Source Code:

    <form action="demo_form.asp" method="get">
         E-mail: <input type="email" name="user_email" /><br />
         <input type="submit" />
    </form>

Support: Firefox 4, Opera 9, Chrome 10

Input type Number

      It is a great challenge to the programmers to validate the numeric fields like age, marks,no.of persons, team size.The challenge is that the fields have to take only digits as input, the fields may have minimum and maximum value restrictions and a lot according to the application.. For all these things HTML5 is ready with a simple input type called number

Example:

Age:

Source Code:

        <form action="#" method="get">

       Age: <input max="30" min="18" step="3" name="points"          

                              type="number" value="18" />

       <input type="submit" />

   </form>

Support: Opera 9, Chrome 7, Safari 5

Input type Range
       HTML 5 Defines a new control for entering a number whose exact value is not important (like a slider control). You can also set restrictions on what numbers are accepted:

Example:

Red:

Green:

Blue:

Source Code:

<form method="get" name="f1">
Red: <input type="range" name="r" min="0" max="255"/><br>
Green: <input type="range" name="g" min="0" max="255" /><br>
Blue: <input type="range" name="b" min="0" max="255" /><br>
</form>


Support:  Opera 9, Chrome 4, Safari 4

New Form Attributes

multiple Attribute

The multiple attribute specifies that multiple values can be selected for an input field.

Note: The multiple attribute works with the following <input> types: email, and file.

Example:

Select images:

Try selecting more than one file when browsing for files.

Source Code:

<form action="demo_form.asp" method="get">
Select images: 
<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>

Support: Firefox,Opera,Chrome,Safari

pattern Attribute
       The pattern attribute specifies a pattern used to validate an input field. the browser will automatically Validates the text with specified patterns
Example:

Pin Code:

Source Code:
<form method="get">
Pin Code: 
<input type="text" name="country_code" pattern="[0-9]{6}"
title="6 digit Pin Code" />
<input type="submit" />
</form>

Support: Firefox, Opera, Chrome

contenteditable Attribute
       It will enables the user to edit the paragraph on an web pages..
Example:

This is a paragraph. It is editable. Try to change this text.

Source Code:
<p contenteditable="true">This is a paragraph. It is editable. 
Try to change this text.</p>
Support: Almost all Browsers

References

1. http://www.w3schools.com/html5/default.asp
2. http://www.thehtml5tutorials.com 
3. http://html5tutorial.net/

Okay guys,
This is upto this week..I have collect the information form different websites and specified on only some examples which are solutions to problems in some non-functional requirements.. Let us meet next week with another tip and trick..

Thank Q,

bye bye

My Best Wishes

regards,

M.Agni

Assistant. Professor

ACE Team member

Aditya Edu. Group.