HTML Basix - HTML tutorials and online webmaster tools

Htaccess code generators Code generators Tutorials

Online and offline code generators

Subscribe to RSS feed
Subscribe to the HTML Basix RSS feed.

Using Includes in a webpage.

What is an 'include'?

When you have sections that are the same on each of your pages, as in a navigation menu, when you want to make changes it can become a nightmare if you have more than a couple of pages that need to be updated. The best way to get around this is to 'includes' a file in your page containing the section of code that remains the same on all pages and needs updating, so when changes need to be made, you only have one file to change.

Click for Include tag generator

How do I go about doing this?

Make your page just like you normally would, with the navigation menu in place. Once this is done, work out which parts of the code are going to be the same on each page. Cut and paste the code directly from the webpage you made to a new notepad file. Save the file calling it whatever you like, but for this example save it as a .txt file.

Let's say you called your text file 'top.txt'. Now, instead of saving your webpage as something.html, give it a .shtml extension: show.shtml
Where you cut the code from in the shtml file, type in "<!--#include virtual = "top.txt" -->". That's it!!

If you try to open your show.shtml file on your computer, it won't work unless you are running the shtml page through localhost and localhost is set up to run SSI. Instead, upload your show.shtml page and your top.txt file to a server which allows SSI. They will both need to be in the same folder. Open the show.shtml page in a browser, and hopefully the text.txt file will be included within the show.shtml page.

You cannot use a URL for the test.txt file. You cannot do anything like this:

"<!--#include file="" -->".

It just won't work. You need to use a relative path to the file:

"<!--#include virtual="/top.txt" -->" (remember the leading slash if you are using the path from the 'root' of your website).

Is this all double dutch to you? I've taken screenshots of the top of each of the files...maybe it helps explain it a bit more.

Image 1

Html file showing the use of the include tag
Image 2

Showing the html in the first include file
Image 3

Showing the html in the second include file

Use the 'include tag maker' to generate the tag you need for your file.

Enter the name of the file you are using for your 'include' and choose whether you have it stored in the same directory or a different one. You don't need to enter the slash if it's in a different directory, the generator will do that for you.

file in same directory
file in different directory

How to test if your server is set up to use includes

Before you get overly excited and come crashing down to earth in a real hurry, do a quick test to see if you can actually use includes!

Create a new text file and put the following text in it:

<h1>it works!</h1>

Save the file as test.txt and upload this file to your website in the same directory as the page you want to use it in.
Create a new file called 'show.shtml'. Within this file, straight after your <body> tag paste in the following:

<!--#include virtual = "test.txt" -->

Save the show.shtml file then upload it to your website. Open the show.shtml page in a browser and see if it included the test.txt file...

It doesn't work...what now??

If your message doesn't show, view the source of the page. If you see the 'include' tag there, then your website isn't set up to use .shtml extensions.

Enabling .shtml extentions

In the .htaccess file for your website, place the following code:
AddType text/html .shtml
AddHandler server-parsed .shtml
Save the .htaccess file on your server, and open the show.shtml webpage in a browser. This time it should work!

Site Stats     
Total: 9,411,369 Total: 27,377,936
Today: 227 Today: 491
Yesterday: 532 Yesterday: 2,166
Past Month: 16,492 Past Month: 67,146

547 visitors in the last 24 hours
This page has been visited 213,244 times
There are currently 3 visitors online
click to see where
most people online at once:
286 visitors on 06/27/2012
   You beaut

This site is © HTML Basix 2003 - 2009