Wickham's XHTML & CSS tutorial

Server Side Includes (SSI) and PHP

View in Firefox, Safari, Opera and IE. IE6 often needs different solutions. In general IE7 and IE8 display like Firefox. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

Using SSI or PHP to repeat sections of code on many pages

If you have a standard header, nav bar, footer or any other section of your page you can create separate "include" files just for those codes and substitute SSI or PHP code in the main pages. This enables you to edit the standard section in only one file instead of having to edit it in all your main pages.

For SSI or PHP you form one page complete in the normal way with the header (and other standard sections if any) and check that it displays properly. You then open up Notepad and cut the header div code completely and paste it into Notepad and save as an "include" file while you substitute replacement SSI or PHP code in the main file. In other pages you substitute the same SSI or PHP code. Each main file has to have a filename extension different from .html. This means that any future edits only have to be made in one "include" file. The "include" file only has the code to be substituted, no Doctype, html tag, head section, body tags etc. You can cut out as much or as little code as you want. It might be just the <a href="filename.html">File name</a> link if you think that might change in the future or a whole header with logo, image and text. You can have several different "include" files and their respective replacement SSI or PHP codes on a page. The viewer cannot see the SSI or PHP code in the downloaded file or its source code file as the SSI or PHP code is substituted before downloading.

A simple SSI is SHTML and a better one PHP (which is strictly speaking a different language but can do server side includes). All SSI or PHP pages require your host to process the code before passing it down to the viewer and so you should check that your host supports SSI or PHP. Cheap free webspaces from ISPs usually do not support SSI or PHP. You cannot see the complete page with the "include" file locally on your computer as it has to be processed by your host's server before downloading to the viewer, so you need to upload it to your hosting service to check it online (unless you have a server like Apache installed with WampServer 2 or XAMPP on your computer).

Some people use an SSI for the whole head section. Even though this is not displayed it is still part of the html file and if it repeats on many pages it can be put into an "include" file.

If you can't use SSI or PHP because your host doesn't provide support then an alternative is to use frames or an iFrame or the object tag. All these have to include a complete html page with Doctype, html tag, head section and body.

SHTML

1 green icon If the header is common to many pages then the code to be inserted is put in a file called header.txt while the main files have  and have a filename extension .shtml instead of .html.

Suppose that you want to put an important reminder in all your pages and you know that you will be editing the information frequently then put the code that may alter in an include file; for instance put
All prices have been reduced by 10%.
in a file called pricechanges.txt.

In all the main pages you might have:-
Latest price information:-  Book early to take advantage of these prices.

This would appear in every downloaded page to the viewer as:-
Latest price information:- All prices have been reduced by 10%. Book early to take advantage of these prices.
and the source code file as seen by the viewer would have:-
Latest price information:- All prices have been reduced by 10%. Book early to take advantage of these prices.
instead of your original source code file which had:-
Latest price information:-  Book early to take advantage of these prices.

You can put a complete .html file in an include file as follows:-

which will display properly but when you look at the source code for the .shtml file the whole code for the .html include file will show with its Doctype, html tags, head section and body tags in the middle of all other code which can be confusing. It is better to limit the include file to just the code required and give it .txt file extension.

SHTML can be configured to show the day, date and time.
 on its own will display the day, date and time but adding:-
 will limit it to just the day of the week as in:-
 
which will show only the current day of the week: Friday.

PHP (PHP Hypertext Preprocessor)

2 green icon If the header is common to many pages then the code to be inserted is put in a file called header.inc while the main files have <?php include ("header.inc"); ?> and have a filename extension .php. Follow the same procedure as described for SHTML.

You can use .txt, .php, .html or .htm for the "include" file but it distinguishes it as an "include" file in your file list if you use .inc as the filename extension.

The "include" file should be without doctype, html, head or body tags. If you use a complete page as an "include" file with .html or .htm for the filename extension the final processed page will have two doctypes, two html tags, two head sections, two body tags etc. in an unusual place which is not a good idea so only put the html markup code (say the h and p tags or other markup) in the .inc file.

If you want to link to the "include" file from many pages which are in different folder/directories at different levels from the root directory, you can use this code:-

<?php include ($_SERVER['DOCUMENT_ROOT']."/header.inc") ?>

which, because of the / at the beginning of the filename, will always go up to the root directory and look for the file there. If header.inc is in a sub-directory (say called includes), use the same code but with the sub-directory name added:-

<?php include ($_SERVER['DOCUMENT_ROOT']."/includes/header.inc") ?>

The above codes will not work from a local file as the root folder of your computer is probably C:\ with a lot of sub-folders, so it only works when processed by your online server or if you have a server on your computer like Apache installed with a program like WinampServer 2 or XAMPP.

PHP can do everything SHTML can do and much more. PHP is a complicated language capable of much more than inserting sections of code. It can do mathematical calculations and has many other features.

See Form direct to email for use of PHP to send data direct to your email address without using the viewer's email client and PHP to MySQL for use of PHP to transfer form data to a MySQL database.

The validator w3.org will not validate PHP files from your computer, only online after uploading to your host's server, but if you want to validate before uploading you can save with .html filename extension temporarily and validate the code without the "include" parts, remembering to edit the extension to .php before uploading to the server. SHTML files can be validated.

A good introduction to SHTML is apache.org and to PHP is tizag.com.

Notes

View/Source or View/Page Source in browser menu to see all xhtml code.

The body of this page has margin: 20px.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like Little Egret instead of Little Egret. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.

top | prev | next