Let's pretend you have 10 pages in your site with the same design and you want to change a link in your menu. You would have to edit all 10 pages, right? Nope, there's a much quicker way allowing you to edit just one file and it's not as hard as it sounds.
What we have to do is create a header file and a footer file. The header file contains all the HTML code for the top portion of your site. The footer contains the HTML for the bottom. Content goes between the header and footer. Let's get started...
This is an entire HTML document to give you an idea of what the header and footer are and where the content fits in. The header is in
blue, content is in
red, and footer is in
green.
|
index.html
<html>
<head>
<title>Title of Site</title>
</head>
<body text=black link=blue alink=red vlink=purple>
<!--- menu at the top --->
<p align=center>
<a href='index.html'>Home</a> | <a href='about.html'>About My Site</a> | <a href='links.html'>Links</a>
</p>
This is the content of a page on my site.
<p align=center>Copyright 2002. All Rights Reserved</p>
</body>
</html>
|
After determining which portions are the header and footer, we need to cut them out and paste them into new files named header.html and footer.html. The index.html file we are using as an example should only contain the content after this. Here's an example of how things are divided up.
header.html
<html>
<head>
<title>Title of Site</title>
</head>
<body text=black link=blue alink=red vlink=purple>
<!--- menu at the top --->
<p align=center>
<a href='index.html'>Home</a> | <a href='about.html'>About My Site</a> | <a href='links.html'>Links</a>
</p>
|
footer.html
<p align=center>Copyright 2002. All Rights Reserved</p>
</body>
</html>
|
index.html
This is the content of a page on my site.
|
We now have our header and footer HTML code in their own files. This means we can include these two files at the top and bottom (with content between) of any number of pages on our site. This is very convenient! For example, if you wanted to change a link in your menu, you would just edit it in header.html instead of every page of your site!
There are two common ways to include files. One way is to use Server Side Includes (SSI). If you are going to use the SSI method, you will need to change the extention of your html files from .html to .shtml so your web server knows what to do with the SSI code you will be using to include header.html and footer.html. Here is an example of inclusion using SSI.
index.shtml or anything.shtml for other pages on your site
<!--#include file="header.html" -->
This is the content of a page on my site.
<!--#include file="footer.html" -->
|
The other way to include files is using PHP. To use this method, your files must end with .php, .php3, or .phtml. Find out what extension(s) your web host uses then pick one. The most common is .php. Here's some example code to show you how you can include header.html and footer.html in your pages.
index.php or anything.php for other pages on your site
<? include("header.html"); ?>
This is the content of a page on my site.
<? include("footer.html"); ?>
|
If you have any problems, make sure your host supports SSI and/or PHP. Most free hosts such as Geocities and Tripod do not. However, some free hosts that offer subdomains (yourname.yourhost.com) do support SSI and PHP so it's a good idea to find out before giving up. If you are paying a monthly fee to have your domain (yourname.com) hosted, you will most likely be able to use the SSI and PHP method. If you can't decide which method to use, I would recommend PHP simply because it is a powerful scripting language that you might find yourself doing more than inclusion with in the future. You'll be happy to have added the .php extension to your files.
