Expression® Web Design Blog - Server Side Includes

Server Side Includes

Wednesday, January 07, 2009

FrontPage offered a few different ways to include another page - from the FrontPage Include Component to the Shared Borders (which relied on FrontPage Server Extensions). Of course, there was another way: using frames. Frames are similar to the FrontPage Includes in that they both require the basic HTML elements

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Title</title>
</head>
 
<body>
 
</body>
 
</html>

And yes, I know I wrote about file includes last year, but for search engine (and other) purposes, I thought I would write about it again, using a different title at least. Currently, you still need to publish your pages to the server to see the web page with the includes. With FrontPage Includes, FrontPage (and Expression Web) would show the included content without publishing.

However, with the FrontPage Include Component, all the pages that had the Include Component

<!--webbot bot="Include" U-Include="nav.html" TAG="BODY" -->

needed to be published. With server side includes, only the included page needs to be published. You should consider using server side includes on any content that you might change on a regular basis. This usually includes your navigation and maybe your header and footer. Relying on server side includes will help you with consistency throughout your website. Don't use the includes for things like your title, meta description / title, since these should be unique on each page.

Server Side Includes (SSI)

This is probably the most basic of the server side includes, and commonly called SSI. Instead of using the .htm or .html file extension, you use .shtm or .shtml file extension. This tells the server to look at the code before rendering it on the browser. The include file can be .html or .htm. Sometimes, you can also use .txt or .inc as the included file - if one does not work, contact your webhosting provider to see what "included" extensions are supported.

The code to add to the web page to call the included page is:

<!--#INCLUDE FILE="nav.html" -->

And in the nav.html, the only code would be something like:

<a href="default.shtml">Home</a>
<br><br>
<a href="about.shtml">About</a>
<br><br>
<a href="contact.shtml">Contact</a>

The nav.html page will be formatted from the main page. I have made an example of using server side includes with tables and divides (Expression Web and FrontPage calls these elements layers).

SSI Source Code

Source code is available in a zipped format for the above examples:
Tables (2,712 bytes) | Divs (3,134 bytes)

ASP Includes

ASP includes work very similar as the SSI example above. Usually, you will save the file with .asp extension. For the includes, they could be .asp, .html, .htm, .txt, or .inc. A lot of times when you are working with ASP includes, you might be working with a database. There is code that is used to connect to the database, and this usually contains your database name, database username, database password, and database connection string. For this page, you should save it with a .asp file extension to help protect this information.

<!--#INCLUDE FILE="nav.html" -->

You will see the code is the same as the SSI code. And the code in the nav.html page is also the same:

<a href="default.asp">Home</a>
<br><br>
<a href="about.asp">About</a>
<br><br>
<a href="contact.asp">Contact</a>

With the exception of the file extension, since you are working with ASP files. I switched to ASP pages probably around 2000 when FrontPage 2000 helped to create some ASP pages to connect to a MS Access database. I had to switch to Windows hosting for complete ASP support, but never looked back.

As with the SSI example, I made an example of using ASP Includes with a table layout and one using divides.

ASP Include Source Code

Source code is available in a zipped format for the above examples:
Tables (2,740 bytes) | Divs (2,990 bytes)

ASP.NET Includes

To include a file using asp.net requires some different coding:

<%
Response.WriteFile ("nav.html") 
%>

The nav.html file though is the same

<a href="default.aspx">Home</a>
<br><br>
<a href="about.aspx">About</a>
<br><br>
<a href="contact.aspx">Contact</a>

Examples using ASP.NET includes can be found using a table layout and one using divides.

ASP.NET Include Source Code

Source code is available in a zipped format for the above examples:
Tables (2,759 bytes) | Divs (3,009 bytes)

Some Potential Problems Using Includes

If you website contains multiple folders, you might see some problems when clicking a link or if you have an image in the include file. This can easily be rectified by using relative or absolute paths. I usually use relative paths to help ensure all anchors (hyperlinks) and image sources are correct. An example from the nav.html page above would be:

<a href="/default.asp">Home</a>
<br><br>
<a href="/about.asp">About</a>
<br><br>
<a href="/contact.asp">Contact</a>

You can see that I have placed a slash in front of the default.asp page. This will push the path back to the root web and start to work from there.

Another example when inserting images into an include file. Usually, most webmasters will put their images in an images folder. And if you have

<img src="images/logo.gif" alt="Our Logo" />

and the viewer might be in a folder. This would then cause the path to look for the images folder in that certain folder. However, if you use

<img src="/images/logo.gif" alt="Our Logo" />

This would push the path back to the root web and over to the images folder. You could use an absolute path, but if your domain name changes at some point, you would need to change the path in all these locations. If you use a relative path, chances are very good you will not have the need to change anything.