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 :-
As First Step, we will built a simple Html webpage as shown below.
<title>Wild Nature | Home |</title>
<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>
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
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.