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>
<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:
Excellent work for HTML 5 Repid Start up
Vijendra singh
Post a Comment