Header and Footer Inclusion
This is a beginners tutorial on how to create and include header/footer files at the top and bottom of all pages in your site. This comes in very handy, for example, when you want to update something that is the same on each page such as a menu or copyright notice. You would only need to update a single file to have the changes appear on all pages of your site.
Let's pretend you wish to create have 20 web pages for your site with the same design and you want to change a link in your menu. You would have to edit all 20 pages, right? Nope, there's a much quicker way allowing you to edit just one file for the mene or footer and really it's not as hard as it sounds.
What you 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.
create a file named :
---------------------------------------------------
index.html
---------------------------------------------------
<html>
<head>
<title>Title of your website</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 2009. All Rights Reserved</p>
</body>
</html>
---------------------------------------------------
After determining which portions are the header and footer, you need to cut and paste them into new files, lets name them header.html and footer.html.
The index.html file you 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.
---------------------------------------------------
You now have 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!
Now you only want to call the index page and have the header.html and footer.html included. The way to do this is to rename the page to index.php or anything.php as and add the follows:
---------------------------------------------------
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"); ?>
---------------------------------------------------
No comments:
Post a Comment