HOME      |      HTML      |      PHP      |      DREAMWEAVER      |      CSS      |      C      |
>> Next

Basic AJAX Website using Html, Java Script & Xml

First, have a look at what we are actually going to built here in the DEMO.

This Basic AJAX website tutorial is done to achieve 3 objectives :-

  1. Loading Contents to webpage from a XML file, dynamically.
  2. Loading Contents without webpage refresh.
  3. To demonstrate the AJAX Concept.

As First Step, we will built a simple Html webpage as shown below.

index.html

<html>
<head>
<title>Wild Nature | Home |</title>
</head>
<body>
<div id="contain">
<div id="header"> <img src=head.png> </div>
<div id="l_link">Left Links</div>
<div id="main_body">Main Content Area</div>
<div id="footer">Copyright 2010 - wildnature.in - All Rights Reserved</div>
</div>
</body>
</html>

In the above html file index.html we can see that our simple webpage got a title by name Wild Nature and some <div> tags for webpage Layout.

Also notice a image by name head.png, inserted using the  <img> tag. Make sure the image file head.png is stored on the same Folder / Directory, were we stored out index.html file. If we are going to store the image file in some other location, we need to specify the proper path name in the <img> tag.

Output of index.html

index_output

If we look at the above output, we can notice that there is a image at top as heading but <div> tags are not organised properly.

So, we have to use a external css Style Sheet to control the <div> tags in index.html and have a proper Layout.

We will deal with that in the next section of the tutorial.

>> Next

 

 

WEBSITE TUTORIALS