#web programming tutorials

AJAX Fundamentals

Ajax is a technology that allows us to dynamically send and receive data from the server without having to reload the page or browser. Ajax works very well with XML and JSON, infact ‘X’ in AJAX stands for XML.

What is AJAX?

AJAX stands for Asynchronous Javascript and XML.

In web development Asynchronous means getting information without having to reload the page.

AJAX is not a programming language but a way to use existing standards.

AJAX was made popular in 2005. It was first used in Google Suggest where when you try to search anything in the Google search engine, various suggestions are given in a drop down list for that particular word or phrase. AJAX is also used in Google maps.

It can interact with servers and files without needing to refresh the browser.

It works well with XML and JSON. Ajax was initially made to work with

XML, but as JSON became popular due to its easy, fast and lightweight property, it is used with it also.

How AJAX Works?

fig 1

Here, when an event occurs in a browser, an XMLHttpRequest object is created and sent to the server through internet.

The server, on receiving the request, processes it, creates a response and sends it back to the browser.

The browser then receives the response, processes the data using javascript and updates the page content.

In this only the part of the page data to be modified is sent to the server, not the whole page, hence the changes are reflected without page refresh.

AJAX Internet Standards

AJAX is based on current internet standards. It uses a combination of the following technologies:

XMLHttpRequest object: Lets us interact with server data asynchronously (without page refresh).

Javascript/DOM: Lets us interact with the information.

CSS: Lets us to style the returned data.

XML/JSON: XML or JSON is often used as the format for transferring data. We can use plain text as well.

Let us learn more about XMLHttpRequest object.

XMLHttpRequest Object:

The XMLHttpRequest is a javascript object used to send and receive information to and from the browser asynchronously.

The XMLHttpRequest object is instantiated differently in older versions of IE.

The instantiation of XMLHttpRequest object for different browsers is shown below:

if(window.XMLHttpRequest)   //code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest(); else   //code for IE6, IE5   xmlhttp=new ActiveXObject(“Microsoft XMLHTTP”);

In the above code, the XMLHttpRequest object for all the higher versions of IE greater than version 6 and for all other browsers is defined as xmlhttp=new XMLHttpRequest();

In the same way for the lower versions of IE equal to 6 and less than that, the XMLHttpRequest object is defined as xmlhttp=new ActiveXObject(“Microsoft XMLHTTP”);

We have to include this code in AJAXScript.

Onreadystatechange Event

onreadystatechange is an event which occurs whenever the server readyState changes and holds the status of the XMLHttpRequest object.

The important properties of the XMLHttpRequest object are readyState and status.

The readyState property has five stages in its process numbered 0 to 4 as shown below:

0 : request not initialized

1 : server connection established

2 : request received

3 : processing request

4 : request finished and response is ready.

As the stages from 0 to 3 are in process, a rotating image appears indicating that work is in progress.

Status property have two values:

200 : “OK”

404 : Page not found

We should make sure that we check for value 4 in readyState and value 200 in Status property, so that our request is processed successfully.

Checking the Status and readyState

Syntax for checking the status and readyState is given below:

xmlhttp.onreadystatechange=function()   if(xmlhttp.readyState==4 && xmlhttp.status==200)        //do something

In the above code, the request in xmlhttp is checked during the onreadystatechange event in the function. The readystate and status of the request is matched to 4 and 200 respectively in the statement if(xmlhttp.readyState==4 && xmlhttp.status==200).

If the condition returns true then the statements in if block will be executed.

Whole Syntax:

The whole code of a page with the XMLHttpRequest object is shown below:

<!DOCTYPE html> <html> <head> <script> function loadXMLDoc()   var xmlhttp; if(window.XMLHttpRequest)   //code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest(); else   //code for IE6, IE5   xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); xmlhttp.onreadychange=function()   if(xmlhttp.readyState==4 && xmlhttp.status==200)   Document.getElementById(“myDiv”).innerHTML= xmlhttp.responseText; xmlhttp.open(“GET”,”ajax_info.txt”,true); xmlhttp.send(); </script> </head> <body> <div id=”myDiv”><h2>Let AJAX change this text</h2></div> <button type=”button” onclick=”loadXMLDoc()”>Change Content</button> </body> </html>

Here we have a code for a webpage requesting to change the content in the div block.

In the body section of the above code, a text Let AJAX change this text is defined in the h2 heading tag in the div block having id myDiv.

Next a button with caption Change Contentis added which calls the function loadXMLDoc()when clicked.

In the loadXMLDoc() function we have declared a variable xmlhttp.

Then we have created the XMLHttpRequest object according to the supporting versions of the browsers.

When the request is processed, the readyState and the status properties are checked to make sure that the request is processed successfully.

And if the readyState and status properties satisfy the condition, the content of the div block having id myDiv is changed using innerHTML statement.

The response is send through xmlhttp.open(“GET”,”ajax_info.txt”,true); statement. The response is send through GET method and the text to be changed is written in the ajax_info.txt file.

Then the response is send through the statement xmlhttp.send().

XML Fundamentals

Today we will be learning XML Fundamentals. XML and JSON are different but are used for same thing, that is to store data, structure data. They are called Data Interchange Formats. So let’s have an introduction to XML.

What is XML?

XML stands for Extensible Markup Language.

XML is a markup language like HTML and not a programming language.

It uses tags, just like HTML.

XML is not a replacement for HTML.

XML was created to transport or store data.

XML is very easy to learn compared to learn any programming language.

Some XML History

XML is an application profile of an ISO standard SGML, and most of XML comes from SGML unchanged.

XML version 1.0 was defined in 1998. It had many minor revisions since then XML 1.0 is the recommended version.

XML version 1.1 was published in February of 2004, the same day as version 1.0’s third edition. 1.0 is generally suggested over 1.1 unless the project needs specific features of 1.1.

There have been discussions of an XML 2.0, although no organization has announced plans for work on such a project.

XML vs. HTML

There is no comparison between HTML and XML. They are completely different and are used in different situations.

XML is a Data Interchange Format; it’s a way to structure and store data and also to transport data.

XML was created to transport and store data and is more behind the scenes.XML has no pre-defined tags.

HTML is used to display data in a browser and focus on physical presentation. HTML has pre-defined tags.

Now let’s see the basic document structure of XML file in this XML Fundamentals tutorial.

Document Structure

The basic XML file structure is shown below.

We can define our own “tags” in XML.

<?xml version = “1.0” encoding=”UTF-8”?> ----Declaration <users> --------------------------------Root Element       <user> ----------------------------Child Element            <firstname>Brad</firstname>---Sub            <lastname>Traversy</lastname>            <email>[email protected]</email>---Child          <phone>555-555-5555</phone> ------  Elements   </user>      <user gender=”male”>     <firstname>John</firstname>     <lastname>Doe</lastname>     <email>[email protected]</email>     <phone>444-444-4444</phone>   </user> </users>

In the XML file structure, the first line is the declaration that contains the document information like version information, character set, etc.

Declaration must come first in the document.

Every opening tag should have a closing tag.

Each XML document has a root element.

Root element contains the child elements which can in turn have sub-child elements.

All the sub-child elements in a child element are called the siblings of each other.

Attributes like gender=”male” can also be given to the tags.

Use of XML in many different places

Different computer systems and databases usually have different kinds of formats that are incompatible with each other.

This is where XML comes in. XML is stored in plain text format and can be read by almost any system.

XML makes it such that, you can have one system talk to another and share data even though there are completely different platforms.

It is very extensive and comparable with different kinds of system.

Today developers are replacing XML with JSON, but this is the one aspect where XML ought to use XML.

So XML is a software and hardware – independent format for storing data. This is where XML shines.

Some Advantages of XML

Simplifies Data Sharing – Can be used by many systems and offer compatibility.

Simplifies Transport of data – transport of data from one platform to another.

Simplifies Platform Changes – Easy to upgrade systems as the new platform will have no issue reading XML.

Makes data more available – Multiple applications can access the same XML data.

Can Create new internet languages – XHTML, WSDL, RSS, RDF… These use XML in some way.

Important XML Rules

All tags must have an opening and close tags (unlike HTML tags such as

<br/>

) .In XML closing of tag is compulsory. You can write br tag in HTML but in XML you need to write it as

<br/> or <br></br>

.

Tags in XML are case sensitive – is not the same as .

Elements need to be nested properly. If you open the user tag i.e. the child element in the document structure shown above, and close any sub-child element after the closing of the user tag, it will be an error.

XML documents must have a root element. There can only be one instance of a root element.

Attributes must be quoted.

XML Schemas

All XML Schema describes the structure of an XML document.

The schema describes the allowed data, required data and how the data should be organized.

Types of schemas are:

DTD – Document Type Definition.

XML Schema – XSD, RELAX NG, W3C XML Schema language. These are the different versions of XML Schemas.

XML has a certain schema that an XML file has to match up against in order to be comparable.

Implementing Loops in JavaScript

In this session we will study the LOOPING statements of java script which includes for , while , do while , for in loops which are illustrated in the given tutorial.

So to implement the loops in javascript follow the steps given below :

So to implement the loops write the following code in Notepad++ .

<!Doctype html> <html>   <head>     <title>Javascript Loops</title>   </head>   <body>       <h1>Thi is the dowhile loop</h1>        <script>     var people = ['Sally','Bob','Steve','Jen'];     i = 0;     while(i < people.length)         {       document.write(people[i]+'<br />');       i++;     }   </script>             <h2>This is the for loop</h2>               <script>          var i;     for(i=0;i<10;i++)     {             document.write("Number is" +i+" <br />");     }           </script>          <h1>This is the for in loop </h1>              <script>     var people = ['Sally','Bob','Steve','Jen'];     for(i in people)         {       document.write(people[i]+'<br />');     }         </script>               <h1>This is the while loop</h1>              <script>             var i = 0;             while(i <= 10)                   {             document.write('number '+i+'<br />');             i++;           }             </script>        </body> </html>

After writing the code your Notepad++ window will have the following look :

So now when you run it on the browser you will have the following output :

Implementing XML with DTD schemas

In this session today, we will learn to implement xml with the DTD schema and validate it using xml validator.

To implement xml with DTD schema follow the steps given below :

Create a new folder on the desktop for example xml :

Inside this folder create a new file called as index.xml.

Right click on index.xml and open it with Notepad++ ,so the window will look like as shown below:-

So to create an xml with DTD schema write the following code in Notepad++ .

<?xml version="1.0"?> <movies>    <movie>        <title>The Godfather</title>     <year>1972</year>     <genre>Drama</genre>     <director>Francis Ford Coppola</director>    </movie>    <movie>        <title>Superbad</title>     <year>2007</year>     <genre>Comedy</genre>     <director>Greg Mottola</director>    </movie>    <movie>        <title>The Departed</title>     <year>2006</year>     <genre>Drama</genre>     <director>Martin Scorsese</director>    </movie>    <movie>        <title>Saving Private Ryan</title>     <year>1998</year>     <genre>Action</genre>     <director>Steven Spielberg</director>    </movie>    <movie>        <title>The Expendables</title>     <year>2010</year>     <genre>Action</genre>     <director>Sylvester Stallone</director>    </movie> </movies>

After writting the code you will have the following look of the window :

So now when you open the file in Internet explorer you will have the following output :

Create an another file say for example movies.dtd in your xml folder.

So now write the following code in Notepad++.

<!ELEMENT movies (movie)> <!ELEMENT movie (title,year,genre,director)> <!ELEMENT title (#PCDATA)> <!ELEMENT year (#PCDATA)> <!ELEMENT genre (#PCDATA)> <!ELEMENT director (#PCDATA)>

So after writting the code you will have the following Notepad++ window look out:

Now we have to validate the XML and DTD file, for that we will used the xml validator. (Search on Google, xml validator).

You will get the different xml validator ,with the respective validator you have to validate your xml or DTD document.

So as shown in the abve figure we have to use the w3 validator to run our xml document structure.

Copy and paste our index.xml file code into syntax-checker, hence after doing it you will have following view of your window :

When we click on the validate button it will display the dialog box with a message that no error found,if your xml document is correct but if there is an error in your xml it will display the error description. Otherwise it will simply display No error Found message.

To add the movies.dtd file to the syntax checker First we have to Copy ourindex.xml file code to the syntax-checkeralso mention the movies.dtd file code in it. So the complete code is given below.

<?xml version="1.0"?> <!DOCTYPE movies[ <!ELEMENT movies (movie)> <!ELEMENT movie (title,year,genre,director)> <!ELEMENT title (#PCDATA)> <!ELEMENT year (#PCDATA)> <!ELEMENT genre (#PCDATA)> <!ELEMENT director (#PCDATA)> ]> <movies>    <movie>        <title>The Godfather</title>     <year>1972</year>     <genre>Drama</genre>     <director>Francis Ford Coppola</director>    </movie>    <movie>        <title>Superbad</title>     <year>2007</year>     <genre>Comedy</genre>     <director>Greg Mottola</director>    </movie>    <movie>        <title>The Departed</title>     <year>2006</year>     <genre>Drama</genre>     <director>Martin Scorsese</director>    </movie>    <movie>        <title>Saving Private Ryan</title>     <year>1998</year>     <genre>Action</genre>     <director>Steven Spielberg</director>    </movie>    <movie>        <title>The Expendables</title>     <year>2010</year>     <genre>Action</genre>     <director>Sylvester Stallone</director>    </movie> </movies>

Then syntax-checker validates the movies.dtd code with xml (i .e our index.xml ) .This is called XML with DTD schemas.

When we click the validate button at that time it will display the dialog box. If the XML with DTD schemas is correct then it will display No error Found message.

Hence the window will look like as shown below :-

You can also check by giving the filename path,so the window looks like this:-

Learn to display xml structure in the browser

In this session we will study the XML fundamentals in which we will learn to display the xml structure in your browser.

So to display the xml structure in your browser follow the steps given below.

Create an new folder on the desktop for example xml :

Inside the xml folder create an new file say index.html

Rightclick and open index.html with Notepad++ , the window look like as shown below :

Now write the code in the index.html file to create an xml structure.

<?xml version="1.0" encoding="UTF-8"?> <note>     <to> Vicky</to>     <from>Mayu</from>     <heading>Give me Reminder</heading>     <body>Don't forget me this weekend! Plz</body> </note>

After writting the code your Notepad++ window will look like as shown below:-

So now when you run it on the browser you will have the following output:-

Learning Java Script Fundamentals

In this session we will study the fundamentals of Java script which will teach us how to display the text in a browser window, implement looping statements(for,while,do while),Functions and arrays.

To understand the Java script fundamentals follow the step given below :

For adding java script to an HTML page we can embed the code in two ways:

Internally(i.e within your same page).

Externally(i.e we can import from outside the java script file.

Now write the following code in Notepad++.

<html> <title>Java script</title> <head>      <script>               alert("THIS IS THE FIRST JAVA SCRIPT PROGRAM");      </script>   </head> <body>      <h1>Wecome to java script program</h1> </body> </html>

After writing the code the Notepad++ window will look like as shown below :

After you run it on the web browser you will have the following output :

We can print the text on browser using document.write statement as shown in the code below,so write the following code in Notepad++:

<!DOCTYPE html> <html> <body> <h1>This is my First Web Page</h1>     <script>             document.write("<p>My First JavaScript</p>");     </script> </body> </html>

The code in Notepad++ will look like as shown below :

Thus after you open it using the web browser you will have the following output :

Looping statements in Java are as follows :

For statement

While statement

Do.. while statement

For implementing the FOR STATEMENT in Java write the following code in Notepad++.

<!DOCTYPE html> <html> <head>                <h1>This is the for statement</h1> <script>   var i;     for(i=0;i<10;i++)     {       document.write("Number is" +i+" <br />");     } </script> <head> <body> </body> </html>

Now your Notepad++ window will look like as shown below:

The output of window will look like as shown :

For implementing WHILE STATEMENT in Java script write the following code in Notepad++:

<!DOCTYPE html> <html> <head> <h1>This is the while statement</h1> <script>   var i=0;     while(i<10)     {          document.write("Number is" +i+" <br />");          i++;     } </script> </head> <body> </body> </html>

You will have the following view of the window :

The output of it is given below:

The do.. while loop work similar to while loop but it initializes the variable and statement within the do block then check the condition of the while loop. Syntax :

do{ var i=0; document.write(“number is”+i+); } While(i<10){ Document.write(“number”+i+”<br>); i++; }

For example of do…While loop write the following code in Notepad++:

<html> <head> <script type="text/javascript"> var count = 0; document.write("Starting Loop" + "<br />");   do   {     document.write("Current Count : " + count + "<br />");     count++;   }   while (count < 10);   document.write("Loop stopped!"); </script> </head> <body> </body> </html>

Your Notepad++ window will look like as shown below:

The output will be as follows :

For implementing functions in Java script use the syntax given below : Syntax:- CREATE THE FUNCTION

function   myFunction() {    alert(“This is the function”); }

Syntax:- CALL THE FUNCTION

myFunction();

Write the following code in Notepad++ to display the function.

<!DOCTYPE html> <html> <body> <h1>My First JavaScript</h1> <button type="button" onclick="myFunction()">CLICK IT</button> <script>       function myFunction()       {          alert("WELCOME TO EDUONIX LEARNIG SOLUTION");       } </script> </body> </html>

The view of Notepad++ after inserting the code will look like as shown below:

The output of the code will be as shown below:

For implementing Array in Java script, write the following code in Notepad++ to display the array:

<!DOCTYPE html> <html> <body> <h1> Welcome to eduonix learning solution</h1>   <script>     var i;     var mycars = new Array();     mycars[0] = "Saab";     mycars[1] = "Volvo";     mycars[2] = "BMW";     for (i=0;i<mycars.length;i++)     {                  document.write(mycars[i] + "<br>");     }         </script> </body> </html>

Now your Notepad++ window will have the following view after writing the code:

You will get the following window as the output after you open it in the web browser.

Installation of Postgresql server

In this session today,we will first start with the installation of Postgresql server and then we will create a sample database for our project.

For installation of Postgresql server follow the steps given below :

Open the Web Browser

Paste the link below in the web browser: http://enterprisedb.com/products-services-training/pgdownload

Following window will appear:

As given above download the latest version of Postgresql for windows of respective 32 or 64 bit version depending on the system.

After performing the above steps following window will appear which will ask to save the file.

After saving the file in your system, just open it and you will have following window :

Click on the Next Button,it will automatically detect the installation directory as given below.

Then again click on next button,following window will appear.

Again click on the next button, password window will appear.

Enter the password and then click next,following window will appear with the port number on it.

Now select the option as it is,as [Default Locale] as given in below window.

Now the Setup window will appear displaying, ready to install,as given below.

For starting installation click on the next button and the following window will appear

After the installation gets complete the following window will get displayed.

Tick the Stack Builder may be used….statement and click on finish button you will have following window :

Then select the “PostgreSQL 9.3 on port 5432” from the check box and then click next button.

The following window will get displayed.

Now select only the checked options from this window

After selecting click on the next button,the following window will appear.

Once more click on the next button.

In the above window make sure to uncheck the “skip Installation“ checkbox ,click the next button,following window will appear

Now click on the next button the installation of other components will start as given below.

After this the following window will appear then click on the finish button.

Then finally the following window will appear displaying that the installation is complete as given below.

Then click on the finish button.

For starting the PostgreSQL for the first time follow the steps as stated below :

Click on the start->All Programs->PostgreSQL 9.3->pgAdmin III,following window will be displayed.

After opening the pgAdmin III the following window will be displayed :

In the above window go to the PostgreSQL 9.3 from the object browser and right click on it and then click on connect.

The following window will appear.

Enter the password in the above window. The password which was entered during installation in step 8.

After the connection you can see the following window of the postgres database. This database comes by default.

So now let’s create a database for our project:

As we can see in the window given below,right click on the data base.Then click on the New Database option

The Following window will get displayed.

Then type myrubyblog adjacent to the name as given below,then click Ok Button.

This will create the database as we can see in the following window.

Thus we have created a database.

Developing a website using Html and Css

In this tutorial we will understand the role of html and css in developing a website and create a website as a project using html and css.

To begin with the project follow the steps below :

Create a new folder and name it whatever you want.

In that folder ,create two more folders and name it as CSS and images respectively.

In the images folder paste the images which you are going to use in the html document.

Now open Notepad++ and create a file with name index.html

So know after doing all these steps your folder will contain the following three contents:

The image folder contains texture.jpg image as shown below.

Now open the created index.html file in Notepad++ and write the following code in it:

<!DOCTYPE html> <html> <head>   <title>Web Designer Resume</title>   <link rel="stylesheet" type="text/css" href="css/reset.css" />   <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body>   <div id="container">     <div id="header">       <div id="name">         <h1>Brad Traversy</h1>         <h3>Web Designer &amp; Developer</h3>       </div><!--name-->       <div id="contact">        <strong>Email: </strong>[email protected]<br />        <strong>Phone: </strong> (978) 555-5555       </div><!--contact-->     </div><!--header-->          <div class="clr"></div>          <div id="profile" class="row">     <h2 class="left">Profile</h2>     <p>Progressively evolve cross-platform ideas before            impactful informidaries.Lorem ipsum dolor sit amet,            consectetur adipiscing elit.Quisque ut semper lacus.            Aliquam malesuada velit non nisi hendrerit,            non faucibus odio ultrices.     </div><!--profile-->          <div class="clr"></div>          <div id="skills" class="row">       <h2 class="left">Skills</h2>       <ul>       <li>       <h2>Web Design</h2>       <p>I have an eye for design.                I can make almost anything come together                in terms of color.             </p>       </li>       </ul>     </div><!--skills-->        </div><!--container--> </body> </html>

So after writting the code you will have the following view of your window

In CSS folder create two text documents and name them as style.css and reset.css respectively and so after creating them your window will look like as shown below :

Now open your style.css file and write the following code in it:

body{   background: url(../images/texture.jpg) repeat;   font-family:Gerogia;   font-size:15px; } strong{font-weight:bold;} .clr{clear:both;} h1{   font-size: 48px;   text-transform: uppercase;   letter-spacing: 3px; } h3{   text-transform: uppercase;   letter-spacing: 2px;   font-style:italic;   font-size:21px; } #container{   width:930px;   margin:50px auto 10px auto;   padding:20px 30px;   border-top:#666 solid 6px;   border-bottom:#666 solid 3px;   background:#f5f5f5; } #header{   padding:10px 0;   border-bottom:#ccc dotted 1px;   overflow:hidden; } #header #name{   float:left; } #header #contact{   float:right; } .row{   padding:30px 0;   font-size:20px;   overflow:hidden;   border-bottom:#ccc dotted 1px; } h2.left{   float:left;   width:140px;   font-style:italic; } #profile p{   float:right;   width:700px } #skills ul{   float:right;   width:700px; } #skills ul li{   float:left;   width:180px;   padding:0 40px 0 0;   font-size:16px; } #technical table{   float:right;   width:700px } #technical table td{   width:100px;   border-bottom:#ccc solid 1px;   padding:5px; } #experience div{   float:right;   width:700px;   border-bottom:#ccc solid 1px;   padding:10px 0; } #experience div h3,#education{   font-style:normal;   font-size:18px;   line-height:1.6em; } #experience div h4{   font-style:normal;   font-size:16px;   line-height:1.6em; } #experience div p{   font-size:15px;   line-height:1.6em; } #education div{   float:right;   width:700px;   padding:10px 0; } #education div h3{   font-style:normal;   font-size:18px;   line-height:1.6em; } #footer{   text-align:center;   margin-bottom:10px; }

Now open your reset.css file and write the following code in it:

/* Reset Styles */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {   margin: 0;   padding: 0;   border: 0;   font-size: 14px;   font: inherit;   vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {   display: block; } body {   line-height: 1.3; } ol, ul {   list-style: none; } blockquote, q {   quotes: none; } blockquote:before, blockquote:after, q:before, q:after {   content: '';   content: none; } table tr td {   border-collapse:collapse; }

After writing the code in reset.css file save it , your window will have following look :

Now open index.html file in a browser ,it will display the following window.