Chandra sekhar: Learn HTML 5 step by step

Learn HTML 5 step by step - Part 1

HTML 5 is one of the hot topic in recent days. We will start with very basic features and move towards advanced features and scenario in step by step .

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.

How HTML 5 is different from previous versions?

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.

<!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

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.

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 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.

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.

Let’s look at some of them.

Number

<input type="number" name="MyNuberElement" id="MyNumberElement" />

Range

<input type="range" name="MyRangeElement" id="MyRangeElement"/>

Color

Hide Copy Code

<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="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />

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.

&hellip;

<label for="birthMonth">Birth Month</label>

<input type="month" id="MyMonthElement" name="MyMonthElement" autofocus />

&hellip;

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

Let us set watermark on an input control.

<input type="text" placeholder="Enter Value" id="MyPlaceHolderControl"

               name="MyPlaceHolderControl" />

Understanding HTML 5 Datalist control

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.

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 won’t provide any special advantage other than adding semantic meaning to our UI.

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.

But now validation code will become a standard code with the help of new HTML 5 validation support.

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>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

Implementing validation using custom validation attributes

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:

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="[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.

Application Cache in HTML 5

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.

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 {

    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

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

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 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 &ndash; Style.css will be cached with page


NETWORK:

/Styles/Style2.css

# Comment &ndash; Style2.css will be available only online


FALLBACK:

OnlineStyles\Style3.css OfflineStyles\Style4.css

# Comment &ndash; 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

Lab 11 - Importance of NETWORK section

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.

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 won’t work.

Chandra sekhar