Server Side Includes - SSI's:
The Server Includes One HTML File In Another On Request
Introduction and Overview
E06a - (4:13)
All of the information below the following horizontal rule, up to the second horizontal rule, is from another file (includedDemoFile.html) that is being included in this one:
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.
- 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).
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.
Everything above the preceding horizontal rule is from the include file.
Exercise:
NOTE! The results of your include exercise code will be uploaded to my server and then viewable here (as soon as I grade them).
e06d - (2:44)
- Create a folder named yourlastname_E06
- Create a new file named yourlastname_E06.shtml in the folder you just made.
- Put two paragraphs of lorem ipsum text into it.
- Create another html file in the folder, leaving out all page structure tags.
- Name it yourlastname_E06_included.html
- Create a table on that page with just one row and one cell.
- Set the table width to 50%. The opening table tag will look like this:
<table width=50% align=center> - Put a single paragraph of a favorite quote in the lone cell.
- The only code on the page ought to be the single cell table with your favorite quote as its contents.
- Set the table width to 50%. The opening table tag will look like this:
- Using the information from this page, put ssi code in between the two paragraphs in the first file so that the table from the second file will appear if the page is sent from a server (assume that the files are all in the correct location on the server relative to each other).
- Unfortunately, you will not be able to test your files before you send me the folder (unless you have access to a server, which is beyond the scope of this).
- Please double check that your code is correct so that when I test it, it will work. Again, use the information on this page to do the job.
- Please send me the folder with the two files in it.
Thanks