If you are building a simple website using just simple HTML/CSS/Javascript that has say 5 pages, is it possible to build a template so that the headers and navigation can be called in each page?
The JavaScript and CSS, yes, the HTML, without something like server side includes or a dynamic language doing its own inclusion, no.
The only option without using the above is if you use frames, or an iframe, but they have their own issues you have to content with.
Otherwise, you will need to just bite the bullet and have duplicate code across all your pages.
While you could use JavaScript to generate content, this is a bad idea (for all the usual reasons that having JavaScript that isn't unobtrusive isn't a good idea).
You should use either a proper template system or an include system.
I would suggest looking at the ttree utility that is part of Template-Toolkit. It generates static files, so you don't need any particular server side support to use it.
use a scripting language such as asp or php is best option.
option 2 is to use iframes and option 3 is if you don't have access to a scripting language such as ASP or PHP, and don't want to use iframes you could use jQuery and use $.get() to load header and footer files into named DIV's after the page load. that would require javascript and would be FAR from optimal.
You can create a header.html, a footer.html and then regular content, and fetch the header/footer with AJAX every time, placing it before and after the content. A server side scripting language would be easier, but this is possible.
I am not very sure about this but can it not be done with XSLT and XML?