Learn HTML 5 in 3 Days - Day 1 - CodeProject

Learn HTML 5 in 3 days Day 1 - CodeProject
1 of 18
http://www.codeproject.com/Articles/827673/Learn-HTML-in-days-Day
11,332,218 members (40,585 online)
home
articles
quick answers
discussions
Member 11342613
features
community
459
Sign out
help
Articles Web Development ASP.NET General
Article
Learn HTML 5 in 3 days Day 1
Info
Browse Code
Marla Sukesh, 24 Mar 2015
Stats
Rate:
First Posted
9 Oct 2014
Views
8,063
Download NewFormElements.zip - 27.3 KB
Downloads
8,308
Download Datalist.zip - 26.9 KB
Bookmarked
308 times
Welcome to day 1 of Learn HTML 5 in 3 days article series
Comments (82)
Add your own

alternative version
Best Web Dev Article

of October 2014
(Second Prize)
Vote!
4.82 (167 votes)
Revisions (8)
Alternatives
CPOL
Download output.zip - 26.9 KB

Download Validation_using_type_attri bute.zip - 27.2 KB
Tagged as
C#
Download Customizing_validation.zip - 27.4 KB
ASP.NET
Download OfflineApp.zip - 21 KB
HTML
Download OfflineAppAdvanced.zip - 23.7 KB
Beginner
Application
validation
Research
Download Validation_using_other_validation_attributes.zip - 27.1 KB
Introduction
Securing Cloud
Apps with a
Distributed Web...
Error monitoring:
The Key to
Innovative...
Cache
VS2013
HTML5/CSS3
HTML 5 is one of the hot topic in recent days. So I decide to write

a complete learning tutorial about same. Its going to be a 2 days
series article. We will start with very basic features and move
towards advanced features and scenario in step by step fashion.
Related Articles
Note: As a Microsoft guy whenever there is a need for server side

technology I will be using C# and Asp.Net.
A Professional HTML
Renderer You Will
Use
What we wont cover here?
Learn MVC (Model

View Controller) step
by step in 7 days
Day 1
If you dont know anything about HTML then this article is not for you. We wont talk about break (<br>), Bold
(<b>) tags here, rather we will look into new concepts in HTML 5.
Learn MVC 5 step by

step in 7 days Day
1
Learn MVC (Model
view controller) Step
by Step in 7days
Day 6
Reviews of Two New
Books from O'Reilly
about HTML and
JavaScript
You can learn about basic HTML here.
Complete List
Day 1
Day 2 Part 1
Day 2 Part 2 (coming soon)
Day 3 Part 3 (coming soon)
Agenda
Introduction to HTML 5
What is difference between SGML, HTML and XML?
What is Doc type?
How HTML 5 is different from previous versions?
HTML 5 New features
Lab 1 Understanding new Page structure semantics
Lab 2 Demo with New Input attributes
New type values
Some useful attributes
Lab 3 Understanding HTML 5 Datalist control
Lab 4 Output element
Lab 5, 6 and 7 Understanding HTML 5 validation feature
3/28/2015 1:04 PM
2 of 18
Lab 5 implement validation using type attribute of input element

Lab 6 Implementing validation using custom validation attributes
Lab 7 Customizing validation
Lab 8, 9 and 10 and 11 - Application Cache in HTML 5
Lab 8 Simple Application Cache Demo
Lab 9 Solve the double refresh problem
Lab 10 Understand more about manifest
Lab 11 - Importance of NETWORK section
Application caching vs old browser caching
Summary
Introduction to HTML 5
Lets start with understainding some basic, intriguing and unaware terminologies and concepts.
What is Doc type?
How HTML 5 is different?
Understand HTML

SGML stands for Standard Globalized Markup language is the one used for defining standard markup
languages. In simple words it defines how a document should looks like.
HTML stands for Hyper Text markup language is a standard Markup language based on SGML and it will
be used for creating Web Pages. Rules defining the markup is present inside a DTD and DTD is created
using SGML.
XML stands for Extensible markup language is derived from SGML and its purpose was cattering growing
need of internet. HTML had some limitations which was over came by XML. XML is simply a subset of
SGML which will be used for representing Data.
What is Doc type?

When you try to create a HTML page using tools like Dreamweaver or Visual studio you will find following line at
the top of the document always.
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Have you ever wondered what it is?

Its simply an instruction to the web browser about the version of HTML the page is written in. With doctype we
refers a DTD which defines how HTML document should be structured, what all tags are allowed, what should be
the parent, what should be the child etc. In short DTD contain rules.
How HTML worked for me with Doctype then?

Most of the browser said Its ok if you wont provide DTD. I can understand HTML well. I know its
rule and so I know how to render it.
This is the reason why most of the developers are unaware about DTD and doctype.
How HTML 5 is different from previous versions?

HTML 5 is not based on SGML hence it wont require DTD. Its all together new markup language and have its
own parsing rules. Its specifications and syntaxes closely resembles with prior version but its all together a new
language.
In case of HTML 5 doctype is quite simple.
<!DOCTYPE html>
Now as per the w3.org DOCTYPEs is required in top of every HTML document despite of its HTML4 or HTML 5.
When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications.
Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the
relevant specifications.
HTML 5 New features
3/28/2015 1:04 PM
3 of 18
Main idea behind New HTML 5 feature is to provide standard in web

development world.
From long time we are relying on many third party libraries/plugins to
achieve some common functionalities like datepicker, animations,
validations, playing videos and audios, offline browsing, client side
multi-threading etc.,
Now we will be able to achieve many such functionalities in a
standard way.
Note For beginners Standard means, everyone will follow the
same approach in order to achieve something. Example You will see
same validation code everywhere (in all future applications). Right
now there is no standard. Someone is using jQuery validation where
as someone is using something else. But now onwards there will be
standard.
Lets explore each of them one by one.
Lab 1 Understanding new Page structure semantics

When we think about a Web UI what comes to your mind.
Header (not head tag Header of a page), Footer, navigation bar, Content of page, images, Caption to those
images, a side bar etc.
You can see an alien image in the left

side and a normal boy image in the right
side.
Everyone can easily locate and identify
every body part from the right side image,
because its a standard. This is not a case
with left image.
Same logic applies when it comes to UI
development.
Earlier HTML didnt had standard tags or elements for defining different visible sections of a document such
as header of document, footer of a document, content of a document etc. Some people were using div
decorated with some css styles and some were using tabletrtd. Problem with this approach was
inconsistency.
Now with HTML 5 we have support for standard tags such as Header, Footer, nav, FigCaption (figure
caption) etc., each of which will represent some special section.
These tags makes our markup a semantic markup.
Note: - This tag doesnt provide any special advantages in rendering. They only makes our HTML structure
meaningful.
3/28/2015 1:04 PM
4 of 18
Lab 2 Demo with New Input attributes

New type values
Earlier developer were using different libraries in order to get different UI elements such as datepicker, range
picker, color picker etc.
Now HTML 5 brought standard by introducing new attributes to type attribute of input elements.
Lets look at some of them.
Number
<input type="number" name="MyNuberElement" id="MyNumberElement" />
Range
<input type="range" name="MyRangeElement" id="MyRangeElement"/>
Color
<input type="color" id="MyColorElement" name="MyColorElement" />
Date
<input type="date" id="MyDateElement" name="MyDateElement" />
Time
<input type="time" id="MyTimeElement" name="MyTimeElement"/>
Datetime-local
<input type="datetimelocal" id="MyDateTimeLElement" name="MyDateTimeLElement" />
3/28/2015 1:04 PM
5 of 18
DateTime (Also include time zone)

<input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>
Month
<input type="month" id="MyMonthElement" name="MyMonthElement" />
Week
<input type="week" id="MyWeekElement" name="MyWeekElement" />
Some useful attributes

Autofocus
This attribute let us set initial focus on page load.
…
<label for="birthMonth">Birth Month</label>
<input type="month" id="MyMonthElement" name="MyMonthElement" autofocus />
…
This code makes focus to be set on MyMonthElement control element by default when page loads for the first
time.
Note: In case autofocus is attached to multiple controls focus will be set on first control.
Placeholder
3/28/2015 1:04 PM
6 of 18
Let us set watermark on an input control.

<input type="text" placeholder="Enter Value" id="MyPlaceHolderControl"
name="MyPlaceHolderControl" />
Lab 3 Understanding HTML 5 Datalist control

Datalist is a new tag in HTML 5 which will let us add autocomplete feature to an input textbox.
Its a simple 3 step task.
Step 1 Create Datalist

<datalist id="Hobbies">
<option>Reading books</option>
<option>Watching movies</option>
<option>Playing games</option>
</datalist>
Step 2 Create input control and bind the list

<input type="text" name="TxtHobbies" value="" list="Hobbies" />
Step 3 Execute and Test
Click here if you are interested in learning how to make datalist dynamic using Asp.net MVC.
Lab 4 Output element

Calculation is the integral part of every application and sometime we often display those calcualted values in the
UI. Before HTML 5 there was no standard element for displaying such results. Some people were using span,
somewhere using div whereas some were using disabled input textbox.
It will be very difficult for anyone to understand the purpose of a tag/element/control just by looking at it.
In HTML 5 this problem is solved by introduction of a standard and semantic markup called Output.
<div oninput=
"document.getElementById(MyOutputElement).value =
(document.getElementById('input1').valueAsNumber) +
(document.getElementById('input2').valueAsNumber)">
<input id="input1" name="input1" type="number" value="1"> +
<input id="input2" name="input2" type="number" value="2"> =
<output id="MyOutputElement">3</output>
</div>
Note: Just like to lab2 markups, Output element wont provide any special advantage other than adding
semantic meaning to our UI.
Lab 5, 6 and 7 Understanding HTML 5 validation

feature
Validation is one of the most important features from the day 1 of application development. For implementing
validation we have been using many libraries such as jQuery validation, live validation etc.
3/28/2015 1:04 PM
7 of 18
But now validation code will become a standard code with the help of new HTML 5 validation support.
Lab 5 implement validation using type attribute of input element

Step 1 Create Form tag and add different input elements as follows
<form>
<table>
<tr>
<td>
<label>Email:</label>
<input type="email" id="email" name="email" />
<label>URL:</label>
<input type="url" id="url" name="url" />
<label>Telephone</label>
<input type="tel" id="phone" name="phone" />
<label>Number Demo:</label>
<input type="number" name="MyNumberElement" id="MyNumberElement" />
<label>Range Demo:</label>
<input type="range" name="MyRangeElement" id="MyRangeElement" />
<label>Color Demo</label>
<input type="color" id="MyColorElement" name="MyColorElement" />
</td>
<td>
<label>Date Demo</label>
<input type="date" id="MyDateElement" name="MyDateElement" />
<label>Time Demo</label>
<input type="time" id="MyTimeElement" name="MyTimeElement" />
<label>DateTime Local Demo</label>

<input type="datetimelocal" id="datetime" name=" datetime" />
<label>Month Demo</label>
<input type="month" id="month" name="month" />
<label>Week Demo</label>
<input type="week" id="MyWeekElement" name="MyWeekElement" />
<div style="textalign:right">
<input type="submit" value="validate" />
</div>
</td>
</tr>
</table>
</form>
Note: In the code you can see that we have introduced some new input types like email, url, tel etc. These types
will only serves validation. As per rendering is concerned they will simply generates textbox.
Step 2 Execute and test the application
3/28/2015 1:04 PM
8 of 18
As you can see values in the input controls are validated and a predefined error message is shown (in a popup)
automatically in case of validation fail.
Note: In the image I have shown demo for only three input controls. You can download the source attached and
check for other
Lab 6 Implementing validation using custom validation attributes

In HTML 5 new attributes are added input controls to support validation. Lets do a demo on some of them.
Step 1 Create input controls as follows
<form>
<label>Email</label>
<input type="email" name="TxtEmail"
id="TxtEmail" required />
<label>User Name</label>
<input type="text" name="username"
id="username" pattern="[azAZ]{5,}" />
<label>Age</label>
<input type="number" name="TxtAge"
id="TxtAge" min="10" max="50" />
<br /><input type="submit" value="Register" />

</form>
Explanation:
Required attributes makes textbox a compulsory field
Pattern attribute is set to a regular expression indicating that it should contain minimum 5 and maximum
10 character
Min and Max attribute works with number input control and force control to contain values within that
range.
Output:
3/28/2015 1:04 PM
9 of 18
Lab 7 Customizing validation

We can customize HTML 5 validation completely by handling oninvalid event.
Step 1 Create Input controls, attach validation attributes and add customized error messages as follows.
<form>
<label>Email</label>
<input type="email" name="TxtEmail"
id="TxtEmail"
required/>
<span class="MissingEmailSpan invalid">Email Missing</span>

<span class="InvalidEmailSpan invalid">Invalid email</span>
<label>User Name</label>
<input type="text" name="username"
id="username" pattern="[azAZ]{5,10}"
/>
<span class="InvalidUserNameSpan invalid">Username not matching with pattern</span>
<label>Age</label>
<input type="number" name="TxtAge"
id="TxtAge" min="10" max="50" />
<span class="AgeIsNotInRangeSpan invalid">Age must be be between 10 and 50</span>
<span class="InvalidAgeSpan invalid">Invalid Age</span>
<br /><input type="submit" value="Register" />

</form>
Step 2 Add a style tag and create css to hide error messages initially
<style>
.invalid {
display: none;
}
</style>
Step 3 Hide error message on submit click.

<input type="submit" value="Register" onclick="$('.invalid').hide();" />
Step 4 Invoke functions when input controls contain invalid values.

<input type="email" name="TxtEmail" id="TxtEmail" oninvalid="OnInvalidEmail();" required/>
(Repeat above step for all input controls)

Step 5 Create Event handler JavaScript function as follows.
function OnInvalidEmail()
{
event.preventDefault();
var element = event.srcElement;
var validity = element.validity;
if (validity.valueMissing) {
$('.MissingEmailSpan').show();
}
else if (validity.typeMismatch) {
$('.InvalidEmailSpan').show();
}
}
(Repeat above step for all input controls)

Explanation:
3/28/2015 1:04 PM
10 of 18
event.preventDefault(); - It will prevent the default behavior. Show error message as popup.
event.srcElement - Control to which contain invalid value. In this case email textbox.
element.validity Contains the validation information about control. Important attributes are
valueMissing will be true when required attribute is attached to control and current value is
blank.
typeMismatch will be true when type mismatches with current value of control.
badInput will be true when value in the control is invalid. Example Its a number textbox and
alphatic character is added.
rangeOverflow and rangeUnderflow will be true when control is number textbox and values are
not within the range
Step 5 Execute and Test the application
You can download the attached source code for complete demonstration.
Lab 8, 9 and 10 and 11 - Application Cache in HTML

5
When someone says Web application then what comes to your mind first? Internet isnt it?
You have internet ==> you are online ==> you can use the application
Your internet is down = > you are offline ==>you cannot use the application
Think about Outlook. It gives you an option to check your past mails even if you are offline. Just imagine if
facebook, gmail had such featuresJ. If our internet application were working even in offline mode it would have
made our life easy.
Now this is possible with HTML 5 application cache. Lets understand it with sample demos.
Lab 8 Simple Application Cache Demo

Step 1 Create a new Asp.net Web Forms application
Open visual studio and create a new empty asp.net web forms application
Step 2 Add Style.css
Right click the project. Add new folder and name it Styles
Right click the styles folder >> Add >> New Item. Select style sheet and name it style.css
Add following css block inside style.css
.DivStyle {
backgroundcolor:silver;
}
Step 3 Create manifest text file as follows

Right click the project. Add >> New Item. Select Text file and name it MyCache.txt
Add following content inside it
CACHE MANIFEST
# ver 1
CACHE:
/Styles/Style.css
Step 4 Create a file which need to be cached

Right click your project. Add >> New Item. Select Web Form and name it MyPage.aspx
Add following content inside file
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>
<!DOCTYPE html>
3/28/2015 1:04 PM
11 of 18
<html
manifest="MyCache.txt">
<head runat="server">
<title></title>
<link href="Styles/Style.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="DivStyle" id="MyDiv">
Hi, Execution count is 1
</div>
</form>
</body>
</html>
Step 5 Execute the application
Step 6 Go offline
Step 7 Refresh the page

You will notice that you are still able to browse the application.
Step 8 Change the Web Form

Open MyPage.aspx. And Change content inside MyDiv to something else.
<div class="DivStyle" id="MyDiv">
</div>
Step 9 Execute the applications
Its not a new output. Its not refreshing.
Step 10 Change the manifest file as follows

CACHE MANIFEST
# ver 3
CACHE:
/Styles/Style.css
Step 11 Refresh the page twice

Now you will get the updated output.
Explanation: Understanding step by step
1. Very first line in the manifest line that is CACHE MANIFEST indicates that its a manifest file
2. In the page manifest attribute of html indicates that MyPage.aspx need to be cached.
3. In the manifest file there is a section CACHE. It will contain a list of files which are required for
3/28/2015 1:04 PM
12 of 18
MyPage.aspx to run properly in offline mode. All of these files will be cached along with MyPage.aspx.
4. End user will get the latest contents during the first request and then they get cached. All the subsequent
requests will get cached version.
5. Cache will get updated when something get changed inside manifest file hence in manifest file just after
CACHE MANIFEST keyword one comment line is added. In this example we mentioned it as ver 2 but it
can be anything.
6. When end user makes a request if requesting contents are cached browser will return the cached version
of the content but in the same time in the background browser will make a request for manifest and see if
manifest is changed in the server. In case it is changed Cache will be updated. But as I said it will be done
in the background hence the current request will get the old content. Hence we have to make double
refresh
Lab 9 Solve the double refresh problem

For this simply add following code in your page.
<script>
window.applicationCache.onupdateready = function (e) {
applicationCache.swapCache();
location.reload();
}
</script>
onupdateready event will be fired immediately after the cache is updated.

Note While practice make sure to clear the Application cache manually before every lab. If you are a chrome
user you can do it in this way.
Click on gear icon and go to settings.
Expand advanced settings.
Click on content settings
Click on All Cookies and site data
In the search box enter localhost and click delete icon
Lab 10 Understand more about manifest

CACHE is not the only section in the manifest file. There are more.
NETWORK If you are caching a page you have to specify all the resources in it. Means all the css files, js
files, images etc used in the page.
In some cases we want that some resources will be available only online. When it comes to offline it
should not be available.
NETWORK section let us list those which we dont want to cache.
FALLBACK In some cases we want that some resources should be replaced with some other resources
3/28/2015 1:04 PM
13 of 18
when it goes offline. Example when its online everything should be red but when offline everything
should be green.
Fallback let us define those settings.
Lets have a demo and understand it.
Step 1 Create a new Asp.net Web Forms application
Open visual studio and create a new empty asp.net web forms application
Step 2 Create stylesheet Files
Right click the project. Add new folder and name it Styles
Right click the styles folder >> Add >> New Item. Select style sheet and name it style.css
.Div1 {
}
Right click the styles folder >> Add >> New Item. Select style sheet and name it style2.css
Add following css block inside style2.css
.Div3 {
}
Right click the project. Add new folder and name it OnlineStyles
Right click the OnlineStyles folder >> Add >> New Item. Select style sheet and name it Style3.css
.Div3 {
}
Right click the project. Add new folder and name it OfflineStyles
Right click the OfflineStyles folder >> Add >> New Item. Select style sheet and name it Style4.css
.Div3 {
backgroundcolor:lightbue;
}
Step 3 Create manifest text file as follows

Right click the project. Add >> New Item. Select Text file and name it MyCache.txt
Add following content inside it
CACHE MANIFEST
# ver 1
CACHE:
/Styles/Style.css
# Comment – Style.css will be cached with page
NETWORK:
/Styles/Style2.css
# Comment – Style2.css will be available only online
FALLBACK:
OnlineStyles\Style3.css OfflineStyles\Style4.css
# Comment – Style3.css will be used when online and style4.css will be cached and used when
application is offline
Step 4 Create a file which need to be cached

Right click your project. Add >> New Item. Select Web Form and name it MyPage.aspx
Add following content inside file
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>
<!DOCTYPE html>
3/28/2015 1:04 PM
14 of 18
<html
manifest="MyCache.txt">
<head runat="server">
<title></title>
<link href="Styles/Style.css" rel="stylesheet" />
<link href="Styles/Style2.css" rel="stylesheet" />
<link href="OnlineStyles/Style3.css" rel="stylesheet" />
<script>
window.applicationCache.onupdateready = function (e) {
applicationCache.swapCache();
location.reload();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="Div1" id="MyDiv1">
</div>
</div>
</div>
</form>
</body>
</html>
Step 5 Execute the application
Step 6 Go offline
As you can style2.css didnt cached and style3.css is replaced with style4.css
Lab 11 - Importance of NETWORK section

One may ask a question what will happen if you wont provide it.
In the above example let say we wont specify Network section. Lets understand it by a demo,
Step 1 Clear the cache
Follow the step described in a note after Lab 8.
3/28/2015 1:04 PM
15 of 18
Step 2 Remove NETWORK Section and execute the application

When your application executes for the first time it works fine and you will get a correct output.
Now dont stop your application. Simply refresh the page you will see some strange output like this.
You are online but still style2.css formatting is not applying because only application get cached it will always
loaded from the cache.
When you specify Style2.css in NETWORK section it will always load that file from online location. If you are
online it will work, if you are offline they wont get loaded.
Application caching vs old browser caching

Browser caching works on File level. Browser automatically caches individual files which ultimately reduces the
subsequent request load. It will not make your application work offline because some files required for execution
of application may not be exist in the cache.
Application caching works on application level. It works on transaction. Here one application means, Page which
contain manifest attribute + all the resources specified in CACHE and FALLBACK section of manifest file. Either all
of them get cached or none. If one of the resource fail to cache, application cache wont work.
Summary
So thats it for Day 1.
Hope you enjoyed reading it.

Dont forget to vote and comment.
For all kind of online, Video based, corporate trainings on various Microsoft and Non-Microsoft technologies like
MVC, WCF, Design patterns, MSBI, Angular, HTML 5 etc. visit www.JustCompile.com
For reasonable class room trainings visit http://stepbystepschools.net/.
For 500+ videos on MSBI, .NET, SharePoint, Architecture, SQL, WPF, WCF, MVC, ASP.NET etc click
@ www.questpond.com
Day 2 and Day 3 Agenda

WebSockets
Canvas
SVG
Media
Drag and drop
GeoLocation
WebStorage
Web Worker
Server Sent events
Web Sql
IndexDB
References
http://www.codeproject.com/Articles/702051/important-HTML-Interview-questions-with-answe
License
This article, along with any associated source code and files, is licensed under The Code Project Open License
(CPOL)
3/28/2015 1:04 PM
16 of 18
Share
EMAIL
About the Author

Marla Sukesh
Technical Lead ShawMan Softwares
India
Learning is fun but teaching is awesome.
Code re-usability is my passion ,Teaching and learning is my hobby, Becoming an successful entrepreneur is my
goal.
By professional I am a Corporate Trainer.
I do trainings on WCF, MVC, Business Intelligence, Design Patterns, HTML 5, jQuery, JSON and many more
Microsoft and non-Micrsoft technologiees.
Find my profile here
My sites
justcompile.com
www.sukesh-marla.com
@Twitter
@Facebook
Follow on
Twitter
Google
LinkedIn
Comments and Discussions

Search Comments
Add a Comment or Question

Profile popups
Spacing
Relaxed
Noise Medium
Layout Normal
Go
Per page 50
Update
First Prev Next
Nice information
sandeepkumarvemula
24-Mar-15 3:38
Marla Sukesh
24-Mar-15 5:47
I am pretty new to HTML5, however this article helped me to

understand the concept
Sangunni
28-Jan-15 9:48
My vote of 5
M Rayhan
5-Dec-14 4:19
Re: Nice information
Re: My vote of 5
Where I can get DAY 2 and Day 3?
Re: Where I can get DAY 2 and Day 3?
My vote of 5
Re: My vote of 5
Quality article...we need more true HTML5 tutorials
Marla Sukesh
6-Dec-14 12:43
abhishekdec1
4-Dec-14 8:18
Marla Sukesh
4-Dec-14 11:20
StanleyJHubert
Marla Sukesh
Member 11067341
4-Dec-14 5:09
4-Dec-14 11:20
3-Dec-14 9:06
3/28/2015 1:04 PM
17 of 18
Re: Quality article...we need more true HTML5 tutorials
Marla Sukesh
aarif moh shaikh
4-Dec-14 2:50
Member 11067341
4-Dec-14 8:51
Member 10375744
17-Nov-14 3:45
excellent
Re: excellent
My vote of 5
Re: My vote of 5
How can I validate the input that uses the datalist?
Re: How can I validate the input that uses the datalist?
Good job, Thanks!
Re: Good job, Thanks!
Good job
Re: Good job
My vote of 5
Re: My vote of 5
Good Work!!
Re: Good Work!!
Where is day 2 and day 3
Re: Where is day 2 and day 3
Very nice!
Re: Very nice!
My vote of 5
Re: My vote of 5
about html5
Re: about html5
My vote of 5
Re: My vote of 5
Thanks!
Re: Thanks!
About day 2
Re: About day 2
My vote of 3
Re: My vote of 3
Re: My vote of 3
Re: My vote of 3
Re: My vote of 3
Re: My vote of 3
I'd give it a 4, also
Re: I'd give it a 4, also
Re: I'd give it a 4, also
Marla Sukesh
VaibhavKamble
Marla Sukesh
Member 8773468
Marla Sukesh
SOSPC
Marla Sukesh
BaharDev
3-Dec-14 12:42
3-Dec-14 12:43
17-Nov-14 2:19
3-Dec-14 12:43
16-Nov-14 11:38
3-Dec-14 12:45
11-Nov-14 8:35
3-Dec-14 12:45
11-Nov-14 3:22
Marla Sukesh
3-Dec-14 12:45
Mahsa Hassankashi
9-Nov-14 8:05
Marla Sukesh
3-Dec-14 12:46
Malay Kumar Pandey

Marla Sukesh
AvneeshKaushik
2-Nov-14 14:33
3-Dec-14 12:46
28-Oct-14 21:35
Marla Sukesh
3-Dec-14 12:46
Member 3483641
28-Oct-14 3:31
Marla Sukesh
3-Dec-14 12:47
Gun Gun Febrianza
24-Oct-14 5:16
Marla Sukesh
24-Oct-14 6:47
Member 11171047
23-Oct-14 2:23
Marla Sukesh
24-Oct-14 6:47
JCahyaatnttearjee
20-Oct-14 23:59
Marla Sukesh
21-Oct-14 11:34
Martin Berger
18-Oct-14 21:14
Marla Sukesh
21-Oct-14 11:33
Member 8651121
18-Oct-14 12:49
Marla Sukesh
18-Oct-14 14:44
Member 10419815
17-Oct-14 14:09
Marla Sukesh
17-Oct-14 14:14
Member 10419815
17-Oct-14 14:19
Marla Sukesh
17-Oct-14 14:53
Member 9666728
17-Oct-14 17:06
Heriberto Lugo
18-Oct-14 20:24
chuckles_net
17-Oct-14 13:42
Marla Sukesh
17-Oct-14 14:13
chuckles_net
17-Oct-14 17:51
3/28/2015 1:04 PM
18 of 18
Last Visit: 1-Jan-00 0:00
General
News
Last Update: 27-Mar-15 22:34
Suggestion
Question
Refresh
Bug
Answer
Joke
Rant
1 2 Next
Admin
Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.
Permalink | Advertise | Privacy | Terms of Use | Mobile

Web04 | 2.8.150327.1 | Last Updated 24 Mar 2015
Layout: fixed | fluid
Article Copyright 2014 by Marla Sukesh

Everything else Copyright CodeProject, 1999-2015
3/28/2015 1:04 PM

Learn HTML 5 in 3 Days - Day 1 - CodeProject

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learn HTML 5 in 3 Days - Day 1 - CodeProject

Uploaded by

Copyright:

Available Formats

Learn HTML 5 in 3 days Day 1 - CodeProject

11,332,218 members (40,585 online)

Articles Web Development ASP.NET General