August 3, 2010
Someone asked me a question about HTML includes recently.
Well, it’s pretty simple. Here’s a quick tutorial.
- Create a new HTML page with empty code. If your editor inserts code automatically, delete it.
- Go to your original HTML page where you have your existing footer. Cut the code (Edit->Cut). Paste (Edit->Paste) it into the new HTML file you created. Save it as footer.html into the root directory (wherever your index.html is located.
- Now we want to insert the code that includes the newly created footer on the page. This is called an HTML Include. Go back to your original HTML page. In place of where you originally had the footer code, you’re going to insert this code:
- Save your file.
- Upload both files to your server and everything should work perfectly.
For all other existing pages of your website, you’ll need to go and delete its current footer and add in the HTML Include footer code. If you’re using a program like Dreamweaver or Microsoft Visual Web Developer you can do a Find and Replace of the entire solution to make it quick and easy.
You can also do the same thing for your header, a sidebar or anything else that repeats throughout your site.