Using Include Files with html on X10Hosting

[frankfriend]

There are a number of gifs which illustrate this posting, included as thumbnails at the end of the posting. The reference numbers are included in the text



The advantages of Include Files using HTML on X10Hosting & how to set them up

What are Include Files?


Include Files allow you to write and store information once only, that you use several times on a website. This saves you time and avoids errors and inconsistencies because you only write and save 'constant' web site content once. They make it much easier to keep things that change up to date without having to update several, or even all, pages.

Include Files are set up once, and then 'Included' within a page by including a reference to the Include File on each page on which you want the content to appear.

When the web page is opened, the web server 'parses' the page with the special Include File reference and makes up the complete page.

Advantages of using Include Files


Include Files:

Save you time when you need to have the same content on several or even all pages of your website

They make it easy to update things that are liable to change

They cut out inconsistency between pages because the same content only has one source however many times it appears on your site.

In many ways Include Files are to Content, what CSS files are to Style. They both provide better control, lead you towards better design, and make change easier and save a lot of repetition and unnecessary work.


Examples of useful Include File content.

Typical things you can store in Include Files are:

Header text & pictures which you want to show on all or on several pages. Obviously if you want to have a number of different headers, then you can have several header Include Files

Footer text & pictures - you often want to have information at the bottom of every page. For example the contact email and or telephone number & address of the webmaster, organisation or company

Contactdetails- you may want to include names, phone numbers, addresses, emails, location directions etc on more than one page. They are thus a great candidate for Include Files because you have to be consistent in these details, you do not want to keep enetring them, and they are subject to change.

Navigation menus - you usually want to include these on every page, or on many of them. The menu actually changes quite often, and you do not want to update every page. Include Files give you a great way of doing this

News & hot topics - if you want to put updates, news items or hot topics on several pages on your website, then an Include File with the words and pictures will make this easy to do.

Sale & special offers - if your site often has special offers & sale items, then you can put them in an Include File.

Meta names & meta description data – these vital areas, which you may well want to include on every page, are an ideal candidate for Include Files. They make it easy to set them up, insert them on every page, and of course to update them


How to set up and use Include Files with html [actually .shtml]


You can create and use Include Files with html or php. These notes only cover html Include Files.

The key to the process is that the host's Server actually parses the Include Files and renders the complete page 'on the fly'.
The starting point is therefore to see what the host's Server supports.
On X10Hosting you can easily check this on Cpanel by selecting the Apache Handler information:


SNAG-0000.gif



which will reveal [as in July 2009]:


SNAG-0001.gif




that on X10Hosting the server-parsed file extension is .shtml



Creating the Include Files & their format


The files can be created with virtually any html page editor, from Notepad to Dreamweaver.

Only include the html tags you want in the file, and the content. DO NOT put in any head, body etc tags but only the content you want,

For example here is a file called includeheader01.shtml :
SNAG-0004.gif





That’s it, the whole file. It has the effect of including this paragraph on every page in which the Include File is inserted.

You must save it as a .shtml file.

I have found that all the files into which you insert an Include File must also be called .shtml files.

.shtml tells the Apache server to parse the page & the Include Files

The Include Files can have any name.

I use includespecificnameversionnumber.shtml as it is easier to find and handle them in the web site building & maintenance process.


Inserting the Include Files into pages


Putting Include Files into web pages is quite easy. The format is:

<!--#include file=”includemeta01.shtml” -->

Thus it appears in light gray in html code and is treated as a comment except for the key parsing activity

for example
SNAG-0005.gif





Set up a ‘master’ page with the Include Files in place


I sketched out a ‘master’ page with all the include file names in place, as well as the standard html headings, and outline. Then when I create a new page, I open it, rename it, and just go ahead.


Test out using Include Files for yourself


The best way to get used to Include files is to try them out. For example just set up a header file and insert of picture. Then build a new page, insert the Include File, call them both .shtml, and try them out.