Tuesday, January 3, 2012

HTML 5


Download the setup files:



First Step:  
First we put the file “HTML_5.xsd” on the path “C:\Program Files\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html”.
Second Step:
Run the file “HTML-5-Schema-Reg-x64” & “HTML-5-Schema-Reg-x64-VWD” for 64bit OS.
OR
Run the file “HTML-5-Schema-Reg-x86” & “HTML-5-Schema-Reg-x86-VWD” for 32bit OS.
Third Step:
Restart the VS2008/2010 application.  And write the code in “.aspx” file for demo test.

Example code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>HTML5 test</title>
</head>
<body>  
         <form id="mainform" runat="server">
         <asp:Label ID="Label1" runat="server" Text="Label"> .Net Control test</asp:Label>
          <asp:TextBox ID="name" required runat="server" placeholder="Fill in your name!" title="Enter your name!"></asp:TextBox><br />
                 
           <label>Name:</label>   
           <input id="name" name="name" type="text" required placeholder="Fill in your name!"  title="Enter your name!" />  <br />

           <label>Age:</label>
           <input  id="age" name="age" title="Enter your age!"  type="number" required  min="18" max="88" value="18"/><br />
               
          <label>Email:</label> 
            <input  id="email" name="email" type="email" required placeholder="anil.singh@droisys.com" title="Enter an email!" /> <br />
    
            <label>Date:</label> 
            <input  id="date" name="date" type="date" required  title="Enter a date!" placeholder="10/03/1984" /> <br />
                    
           <label>Phone No:</label> 
           <input id="phone" name="phone" type="tel" pattern="\d\d\ \d\d\d\d\d\d\d\d\d\d" required placeholder="91 9015519979" title="Enter a Cell number!" /> <br />

           <label>Site URL:</label>   
            <input id="site"  name="site" type="url" required placeholder="http://www.droisys.com" title="Enter the url of your site!" /><br />
               
           <input  id="submit" name="submit" type="submit" value="Send Data" />
    
      </form>
   
</body>
</html>



Descriptions on HTML5

1) Launch Visual Studio and create an empty website.

2) Add a simple html item to your site. This is the mark up for the html form

3) View your form in the browser. This is a typical form. We will have a name field,an email field, an age field,a date field, a site field, a phone field and a submit button.
Later on I will add a "range" field called Priority.

4) Now let's upgrade the form to HTML 5.Let's say that we want to require for every input field to have some data. We could do that with custom JavaScript code, or using the built in web server validation controls.
I have provided some examples on how to use validation with all the ways mentioned above. You can find them here, here and here.

In HTML 5 the only thing I must do is to add the required attribute.

Have a look at the code below for the name field

 <input id="name" name="name" type="text" required />

Make sure you do that for all the input fields you require to have a value.

So without any JavaScript I have validation out of the box. How cool is that. View your page with Firefox or Chrome and see the result for yourself.
Now we can add some watermark effect very easily to our page. I have provided in this blog another example on how to do that with JQuery. Have a look here if you want.
We can do that in HTML 5 without any JavaScript code simply by adding the placeholder attribute to the input field.

<input id="name" name="name" type="text" required placeholder="Fill in your name!"  title="Enter your name!" />

Make sure you do that for the rest of the input fields you think it is appropriate.
In the Age field we need to make sure that only positive numbers from 18-88 are allowed.
We can do that by changing the input type to number and setting the min and max values appropriately. (This will not work in Firefox)

<input  id="age" name="age" title="Enter your age!"  type="number" required  min="18" max="88" value="18"/>
Another validation we want to perform is to have a valid email. We can do that by changing the input type to email.
 The code looks like that

<input  id="email" name="email" type="email" required placeholder="anil.singh@droisys.com" title="Enter an email!" />

View it in the browser and see for yourself. Have a look at the Page Source. We have pure HTML that our users and search engines will love.

Another validation we want to perform is to have a valid date. We can do that by changing the input type to date. This will provide us with a datetime picker control.

This will not work in Firefox and Chrome.
The code looks like that

<input  id="date" name="date" type="date" required  title="Enter a date!" placeholder="10/03/1984" />

View it in the browser and see for yourself. Have a look at the Page Source. We have pure HTML that our users and search engines will love.

Now we need to add some sort of validation for the Site field. I just change the type from text to url.

<input id="site"  name="site" type="url" required placeholder="http://www.droisys.com" title="Enter the url of your site!" />

Then we need to have some sort of validation for the telephone field, so the define a new type=”tel” attribute and a new pattern attribute

<input id="phone" name="phone" type="tel" pattern="\d\d\ \d\d\d\d\d\d\d\d\d\d" required placeholder="91 9015519979" title="Enter a Cell number!" />

I have added another field with a new field Priority that is of type "range", that give us a slider effect.

  <input id="priority" name="priority" title="from 0 to 5" type="range" min="0" max="5" value="2" />

If we need to set the focus on the first field, we just add the autofocus attribute.

<input id="site"  name="site" type="url" required placeholder="http://www.droisys.com" title="Enter the url of your site!" autofocus="on"/>

 If we do not the browser to suggest values to enter in the field, then we can turn it off by using the auto complete attribute to off.
I am showing that only for the first field.

<input id="site"  name="site" type="url" required placeholder="http://www.droisys.com" title="Enter the url of your site!" autofocus="off"/>

You could do that for all the fields you do not want the auto-complete feature on.
Well, I am going to post now the complete markup.

<body>  
         <form id="mainform" runat="server">
         <asp:Label ID="Label1" runat="server" Text="Label"> .net Control</asp:Label>
          <asp:TextBox ID="name" required runat="server" placeholder="Fill in your name!" title="Enter your name!"></asp:TextBox><br />
                 
           <label>Name:</label>   
           <input id="name" name="name" type="text" required placeholder="Fill in your name!"  title="Enter your name!" />  <br />

           <label>Age:</label>
           <input  id="age" name="age" title="Enter your age!"  type="number" required  min="18" max="88" value="18"/><br />
               
          <label>Email:</label> 
            <input  id="email" name="email" type="email" required placeholder="anil.singh@droisys.com" title="Enter an email!" /> <br />
    
            <label>Date:</label> 
            <input  id="date" name="date" type="date" required  title="Enter a date!" placeholder="10/03/1984" /> <br />
                    
           <label>Phone No:</label> 
           <input id="phone" name="phone" type="tel" pattern="\d\d\ \d\d\d\d\d\d\d\d\d\d" required placeholder="91 9015519979" title="Enter a Cell number!" /> <br />

           <label>Site URL:</label>   
            <input id="site"  name="site" type="url" required placeholder="http://www.droisys.com" title="Enter the url of your site!" autofocus="off"/><br />
          
 
               
           <input  id="submit" name="submit" type="submit" value="Send Data" />
    
      </form>
   
</body>


All HTML 5 Tags:
<!--...--> Tag
Example:
An HTML comment:
<!--This is a comment. Comments are not displayed in the UI Screen!-->
<p>This is a paragraph.</p>


<source> Tag:
Example:
The <source> tag is used to specify multiple media resources for media elements, such as <video> and <audio>.
The <source> tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.
An audio player with two source files.
The browser should choose which file (if any) it has support for:
 <audio controls="controls" loop="loop">             
      ource src="images/SleepAway.mp3" type="audio/mp3"  />               
 </audio>  

Autoplay video & Autoplay Audio:

<section id="intro">
    <h2 class="intro">Autoplay video </h2>
    <video width="320" height="240" controls="controls" autoplay="autoplay">
                  <source src="images/movie.mp4" type="video/mp4" />                
             </video>
             <h2 class="intro">Autoplay Audio </h2>              
        <audio controls="controls">              
                  <source src="images/SleepAway.mp3" type="audio/mp3" />                
             </audio>           
    </section>  

Attributes of video & Audio:

Attribute
Value
Description
autoplay
autoplay
Specifies that the audio will start playing as soon as it is ready
controls
controls
Specifies that audio controls should be displayed (such as a play/pause button etc).
loop
loop
Specifies that the audio will start over again, every time it is finished
preload
auto
metadata
none
Specifies if and how the author thinks the audio should be loaded when the page loads
src
URL
Specifies the URL of the audio file


<progress> Tag:  
The <progress> tag represents the progress of a task.
Example:
<html>
<body>
Downloading progress:
<progress value="22" max="100">
</progress>
</body>
</html>


<colgroup> Tag: 
Set the background color of the three columns with the <colgroup> and <col> tags.
Example:
<table>
  <colgroup>
    <col span="2" style="background-color:red" />
    <col style="background-color:yellow" />
  </colgroup>
  <tr>
                 <th>Name</th>
                 <th>Title</th>
                 <th>Price</th>
  </tr>
  <tr>
                <td>A Kumar</td>
                 <td>first HTML5</td>
                 <td>32000 Rs.</td>
  </tr>
</table

<option> Tag:
A drop-down list with four options.
Example:
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<dl> Tag:
Example:
The <dl> tag defines a definition list.

The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).

<dl>
  <dt>.net Book</dt>
     <dd>VS2011</dd>
  <dt>>SQL Book </dt>
     <dd>SQL Server 2011</dd>
</dl>

<footer> Tag:
Example:
The <footer> tag defines footer for a document or section.
Footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
<footer> Copyright 2012-2060.</footer>

<fieldset> Tag:
Example:
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
<fieldset>
    <legend>Information:</legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
</fieldset>

<form> Tag:

Example:
The <form> tag is used to create an HTML form for user input.
An HTML form with two input fields and one submit button:
<form action="Test_form.aspx">
  First name: <input type="text" name="fname" value="Welcome!" /><br />
  Last name:<input type="text" name="lname" value="Hero!" /><br />
  <input type="submit" value="Submit" />
</form>


<menu> Tag:
Example:
A toolbar with two menu buttons on it ("Headermenu"), each of which has a dropdown menu with a series of options:

<menu type="toolbar">
<li>
<menu label=" Headermenu ">
<button type="button" >Home...</button>
<button type="button" >About...</button>
<button type="button" >Contact…</button>
</menu>
</li>
</menu>

<meter> Tag:
Example:
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Use the meter element to measure data within a given range (a gauge):
<meter value="2" min="0" max="10">5 out of 10</meter><br />
<meter value="0.7">70%</meter>
Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.


<s> Tag:
Example:
The <s> tag specifies text that is no longer correct, accurate or relevant.
The <s> tag should not be used to define replaced or deleted text, use the <del> tag to define replaced or deleted text.
<p>
<s>My car is blue.</s>
</p>
<p>My new car is silver.</p>


Thanks,
Anil Singh



1 comment:

Vijendra singh said...

Excellent work for HTML 5 Repid Start up

Vijendra singh