SHTML: A Server Side Include
BEFORE
index.html
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Server Side Includes</title>
</head>
<body>
<div id="header">
<h1>My SIte</h1>
<img src="logo.png" alt="My Logo" />
</div>
<!--...other stuff in the site-->
</body>
</html>
Let's pretend you want to make the header section a SSI because it doesn't change on each page. Follow these steps below.
- Rename index.html to index.shtml
- Make a new file called header.html saved in the root directory
- Cut and Paste the header div into the header.html file. Save it. Close it.
- In the index.html file where the header div used to be put this line.
<!--#include file="header.html" --> - Done
- Now when you want to make changes to the header simply change the header.html file, save, and upload and changes will be reflected on all pages.
AFTER
index.shtml
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Server Side Includes</title>
</head>
<body>
<!--#include file="header.html" -->
<!--...other stuff in the site-->
</body>
</html>
header.html
HTML
<div id="header">
<h1>My SIte</h1>
<img src="logo.png" alt="My Logo" />
</div>