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
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:
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.
Create a new file called 'show.shtml'. Within this file, straight after your <body> tag paste in the following:
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="http://www.site.com/top.txt" -->".
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
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.
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.
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! AddHandler server-parsed .shtml