• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Content > Adding External Content Using Server-Side Includes

Adding External Content Using Server-Side Includes

One way to import external content directly into a Web page is to use a server-side include. This is not an HTML tag, but a command that tells the computer serving your Web pages to the Internet (aptly named the server) to add the referenced file to the page.

Since this is all done before the page is actually sent to the visitor’s browser, you can break up the page into components as separate files and reassemble them. This allows you to place elements like headers and footers into files that can be reused on multiple Web pages, so changes you make to one file will affect multiple pages. The resulting page will look like a normal Web page when delivered.

Although this method’s success depends on whether your server understands this command, almost all servers do these days.

To add a server-side include:


Create a new HTML file into which you’ll add the server-side includes into and save it (Code 4.4). Steps 2 and 3 apply to this page.

Code 4.4. The server-side include commands in index.html allow you to import external content, but only if the page is being delivered from a Web server. If you view the source code of this page in your browser, you won’t see the include tags.

→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → Using Server-Side Includes</title>
        <!-- #include virtual="external.html" -->
        <br />
        <br />
        <!-- #echo var="DATE_LOCAL" -->
        <br />
        <br />
        <!-- #echo var="DATE_GMT" -->
        <br />
        <br />


<!-- #include virtual=
→ "external.html"-->

Add the include anywhere in the body of your HTML document, and set it to import external.html. The path for this file must correspond to the relative location of the file. Absolute URLs cannot be used.

<!-- #echo var="DATE_LOCAL" -->
<!-- #echo var="DATE_GMT" -->

Another useful server-side command is #echo, which tells the server to include either its local time and date or Greenwich Mean Time (GMT) on the page.


Create a new HTML file, and save it as external.html (Code 4.5). This file does not contain the regular open and close <html> tags, because those are supplied by the main document—only any HTML that could be included with the <body> tag in a regular HTML document. The results are shown in Figure 4.4.

Figure 4.4. Using the server-side include, content is placed into the HTML document even before the page is sent to the browser.

Code 4.5. The external content from external.html is imported into index.html. This content can be any standard HTML code; just don’t use <html>, <head>, or <body> tags.

<div style="text-align:center">
     <h1>Alice Through the Looking Glass</h1>
     <h3>Chapter 6</h3>
     <img src="alice_6_3.jpg" width="269"
     → height="420" border="0">

✓ Tips

  • The disadvantage of this method is that you can’t see the external content unless it’s coming from a server. If you try to view this file on your local hard disk, you’ll see a whole lot of nothing or, worse, the commands as text.

  • You can also use JavaScript to add a working clock that shows visitors their local time, as demonstrated later in this chapter.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint