There are many ways to insert html code from one html file into another, for example iframes. Another way is to use a server side include, also called an SSI.

Dynamic Content

E06b - (2:37)

• When you click on a link, a request is sent to a web server for a web page to be sent back to the browser. How that web page is created depends on different factors.
• When you click on a link for a static page, an html file is sent along with any image or Flash files that the html code requires.
  • All the files are complete and already exist.
  • An html file is sent along with the image file, Flash file, etc.
• They are sent exactly as they are. Nothing changes.
• Then the browser's layout engine assembles the page using those files based on the html code.
• When you click on a link for a dynamic page, a web page is assembled by the web server from disparate parts and then sent to your browser.
  • One html file is created that did not exist before.
  • That html file, along with any image, Flash, or other ancillary files, are sent to the browser for its layout engine to do a normal assembly of, as is done with a static page.
• Think of dynamic page creation as a super-fast assembly line where the parts of a page are put together by a server within seconds.
• Example of dynamic pages:
  • When you go to amazon.com, a cookie (tiny text file with coded identification) that had been put on your computer during a prior visit to the site, identifies your browser (and usually you as well).
    • The code in the cookie references a database record that contains information about your name, your prior searches, purchases, interests, and more.
    • A web page is then assembled by the web server based on that data and is sent to your browser.

SSI's - Server Side Includes

E06c - (9:43)

• Server Side Includes, commonly called SSI's or just includes, are a very simple form of dynamic page generation.
• When you click on a link to a page that has ssi code in it:
  • The server first notices that the html files's extension is either .shtml or .shtm
  • Then it knows to look in the html code for special html comments that include directives to insert other information where that html comment is.
  • If the code in the comment requests that html code from a different file (the included file) be inserted, the server will do that work.
• Succinctly, one web page's code is inserted into another web page's code by the web server.
• The assembled html file is then sent to the browser.

Include code

• Look at your browser's address bar. It will indicate that you are looking at the file ssi.shtml
  • However, the entire section between the horizontal lines is actually not a part of that file.
  • Instead, it is included (inserted) from another file: includedDemoFile.html.
  • I have put comments in the code indicating where the included code starts and ends so that you can see where it is. Without such comments, you would not know that what you are looking at is assembled from two html files.
• The including is done because the file ssi.shtml has the following small amount of code in it, and please do not to have a space at the start of your code in this section:
  <!--#include
  ...because it is not allowed. Please code as follows:
  
      <!--#include virtual="includedDemoFile.html" -->
  
  
• This code requests that the server include (insert) the code of a different file, includedDemoFile.html.
• That code is in the original html file that you requested when you clicked on the link for this page.
  • Note that the code is inside a comment tag to prevent it from being seen in the event that the requested include did not load.
  • Also note that the path indicates that the included file - includedDemoFile.html - would need to be in the same folder as the file including it, ssi.shtml
  • But other paths are permissible.
  • There is are different methods for specifying what file to include:
    • file=
    • virtual=
  • But file= is very limited and not recommended for use (see the section The include Element) by the publishers of Apache server software.
    • Note that Apache accounts for 60% of the server market as of March, 2011.

Seamless integration

• Once the assembled files is displayed in the browser, there is usually no indication that some of the code is from elsewhere.
• You will not see the snippet of comment code above if you view this page's source code.
  • This is because that code is replaced by the html code of the included file.
• No scroll bar will appear in the section of the page where the code is, unlike what you will often see with iframes.
• The included file gets inserted into a page that is expected to have the standard page structure tags such as <html>, <head>, <body>
• Therefore, the file that is included is expected to exclude all the top level page structure tags so that the page delivered to the browser is properly formed.
  • However, as you might expect, this is often done improperly resulting in pages that have multiple html, head, and body tags. You will come across this at times and it can present problems.

Special file extension

• It is important to note that the file extension of the file with the include code in it may need to be .shtml or .shtm
  • The added prefix of "s" informs the server that there is SSI code in the page requesting that another page be included in it.
  • The only way to find out if your server requires the "s" is to test it.
• The server then inserts the other page's code into the page that made the request and the entire thing is delivered to your browser.