0

I've just stepped into a new field of HTML designing of websites. I'm using HTML, CSS, jQuery, JavaScript for designing purpose. I've designed one website using above technologies. It has almost forty(40) webpages of HTML design. Now the requirement changes in a design I've created are coming from client. For making those changes I've to make the change in almost all the files. This has become a headache for me. This is a very tedious job. Now I want to reuse the some HTML code in every file. Means Left menu should contain in a separate HTML file, Top Menu should contain in a separate HTML file, Footer menu should contain in a separate HTML file, Right menu should contain in a separate HTML file, etc. In short I want this common code in separate files and I should be able to include all of these files in every HTML file. So that I can do only the body of HTML page in different HTML files. Also the CSS and jQuery files should also be reusable. But I don't want to use any server side technology for including these files. SO can anyone help me in how to achieve this reusability and extensibility of a HTML code? Thanks in advance.

PHPLover
  • 1
  • 51
  • 158
  • 311
  • 1
    You can use a jquery function on page load to load your common page. Take a look at the accepted answer [here](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) – Doan Cuong Apr 11 '14 at 04:05

2 Answers2

2

Use jquery, or make your pages PHP and just use one of these functions in php tags where you want the common parts, or pages.

  • include()
  • include_once()
  • require()
  • require_once()

Take a look at this for some more info on how to use, or do some easy quick google searches.

Edit: Here is a JQuery implementation then, which is all executed in the browser:

Inside some Script tags:

$(document).ready(function(){
    $.get( "test.html" );
});

It follows the syntax on this page. Also, take a look at W3school's jquery tutorial. Also, you might want to look at this page at W3school to see how to add the contents of the html page where you want to.

Ethan Brouwer
  • 975
  • 9
  • 32
  • THanks for your answer but I said I don't want to use any server side scripting language for this purpose. – PHPLover Apr 11 '14 at 04:15
1

The simplest way to share HTML across pages are Server Side Includes. Your user name seems to imply you know your PHP, so this would be the easiest way to handle it (use PHP). If you absolutely can't have it be a server-side solution, you can use JS to handle it instead.

A more complex, but likely preferred way to handle it is to use a template engine. Most Content Management Tools include just that. Wordpress would be one of the more common ones out there.

As for your CSS and JS, those should already be in separate files and you should be linking to them from within each HTML page.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • Thank you so much for your immense help. It really did the magic for me. I've accepted and upvoted your answer. Cheers!!! – PHPLover Apr 11 '14 at 09:34