HTML 5 is one of the hot topic in recent days. So I decide to write a complete learning tutorial about same. It’s 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.
Note: As a Microsoft guy whenever there is a need for server side technology I will be using C# and Asp.Net.
If you don’t know anything about HTML then this article is not for you. We won’t talk about break (<br>), Bold (<b>) tags here, rather we will look into new concepts in HTML 5.
You can learn about basic HTML here.
Complete List
Let’s start with understainding some basic, intriguing and unaware terminologies and concepts.
- What is difference between SGML, HTML and XML?
- 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.
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?
It’s 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 “It’s ok if you won’t 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.
|
HTML 5 is not based on SGML hence it won’t require DTD. It’s all together new markup language and have its own parsing rules. Its specifications and syntaxes closely resembles with prior version but it’s all together a new language.
In case of HTML 5 doctype is quite simple.
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.”
|
|
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.
Let’s explore each of them one by one.
|
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 it’s a standard. This is not a case with left image.
Same logic applies when it comes to UI development.
|
|
|
Earlier HTML didn’t 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 “table…tr…td”. 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 doesn’t provide any special advantages in rendering. They only makes our HTML structure meaningful.
|
 |
|
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.
Let’s look at some of them.
<input type="number" name="MyNuberElement" id="MyNumberElement" />
<input type="range" name="MyRangeElement" id="MyRangeElement"/>
<input type="color" id="MyColorElement" name="MyColorElement" />
<input type="date" id="MyDateElement" name="MyDateElement" />
<input type="time" id="MyTimeElement" name="MyTimeElement"/>
<input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />
- DateTime (Also include time zone)
<input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>
<input type="month" id="MyMonthElement" name="MyMonthElement" />
<input type="week" id="MyWeekElement" name="MyWeekElement" />
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.
Let us set watermark on an input control.
<input type="text" placeholder="Enter Value" id="MyPlaceHolderControl"
name="MyPlaceHolderControl" />
Datalist is a new tag in HTML 5 which will let us add autocomplete feature to an input textbox.
It’s 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.
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 won’t provide any special advantage other than adding semantic meaning to our UI.
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.
But now validation code will become a standard code with the help of new HTML 5 validation support.
Step 1 – Create Form tag and add different input elements as follows
<form>
<table>
<tr>
<td>
<label>E-mail:</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="datetime-local" 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="text-align: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
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
In HTML 5 new attributes are added input controls to support validation. Let’s 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="[a-zA-Z]{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:
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="[a-zA-Z]{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:
- 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 – It’s 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.
When someone says “Web application” then what comes to your mind first? Internet isn’t 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. Let’s understand it with sample demos.
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 {
background-color: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>
<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">
Hi, Execution count is 2
</div>
Step 9 – Execute the applications
|
|
It’s not a new output. It’s 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
- Very first line in the manifest line that is “CACHE MANIFEST” indicates that it’s a manifest file
- In the page “manifest” attribute of html indicates that “MyPage.aspx” need to be cached.
- In the manifest file there is a section “CACHE”. It will contain a list of files which are required for MyPage.aspx to run properly in offline mode. All of these files will be cached along with MyPage.aspx.
- End user will get the latest contents during the first request and then they get cached. All the subsequent requests will get cached version.
- 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.
- 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
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
“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 don’t want to cache.
- FALLBACK – In some cases we want that some resources should be replaced with some other resources when it goes offline. Example when it’s online everything should be “red” but when offline everything should be “green”.
Fallback let us define those settings.
Let’s 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
- Add following css block inside style.css
.Div1 {
background-color:silver;
}
- Right click the styles folder >> Add >> New Item. Select style sheet and name it style2.css
- Add following css block inside style2.css
.Div3 {
background-color:silver;
}
- 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
- Add following css block inside style.css
.Div3 {
background-color:silver;
}
- 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
- Add following css block inside style.css
.Div3 {
background-color: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>
<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">
Hi, Execution count is 1
</div>
<div class="Div2" id="MyDiv2">
Hi, Execution count is 1
</div>
<div class="Div3" id="MyDiv3">
Hi, Execution count is 1
</div>
</form>
</body>
</html>
Step 5 – Execute the application
Step 6 – Go offline
Step 7 – Refresh the page
As you can style2.css didn’t cached and style3.css is replaced with style4.css
One may ask a question what will happen if you won’t provide it.
In the above example let say we won’t specify Network section. Let’s understand it by a demo,
Step 1 – Clear the cache
Follow the step described in a note after Lab 8.
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.
Step 3 – Refresh the page
Now don’t 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 won’t get loaded.
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 won’t work.
So that’s it for Day 1.
Hope you enjoyed reading it.
Don’t 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
