What is a Server-Side Include?
A Server Side Include lets you insert (or include) some HTML
into a different web page in real time (dynamically). The exceptionally
cool thing about it, and why we use it, is that you update a
whole mess of pages by just updating a single SSI file. FYI,
the place I always use it is in my page navigation, footers
and headers.
Check this out:
Let's say I've just finished this page and need to add it to
the dropdown box on my left menu. Now, I have a sh*tload of
pages in this site, so if I had to add a link to this page on
the navigation menu of every page, it would take me forever
and put me in a very bad mood.
But with SSI, I make one file called leftmenu.shtml
and place
a single line of code in all my web pages. So, when I need to
update the left menu, I just edit the one file leftmenu.shtml
and my entire website gets updated instantly. I never need to
open any other pages and all I have to upload is that one file!
You'll need to find out how
your web host is set up for SSI
For instance, my host requires that both the page
that gets included as well as the page that holds the include
both have the .shtml extension, which explains why all my pages
end in .shtml. Some web hosts only require that the initial
page (the one that holds the include) be shtml, so you'll want
to check with your web host. Usually a search in their help
files for "SSI" will tell you what the scoop is.
Components of a Server-Side
Include:
1. The
page you want to insert the SSI into.
2. The bit of code you want inserted into that page.
In this example, lets use this website's left
menu which happens to be called "leftmenu.shtml
".
The file for that doesn't need html, header or body tags because
the page it's inserted into already has all that stuff. So the
only thing in the page leftmenu.shtml
is a table that houses
the dropdown menu, the topic list and all the other stuff you
see to the left.
To insert the left menu, all my web pages have
this bit of code where I want my left menu to appear.
<!--#include file="leftmenu.shtml
"
-->
You
might need to revisit our hyperlinks page to remember relative
vs. absolute linking, because that applies to this, too:
ex. <!--#include file="/pretend-directory/leftmenu.shtml
"
--> will find the leftmenu file in the "pretend-directory"
folder.
If you'd like us to alert you when new tutorials arrive,
join our email list (on the menu to the left)
You can email us at
Sorry, no individual questions answered,
though we may use yours as the basis for a new article.
©2009 www.WebsiteBeginner.com
