How to include a HTML file in another HTML file

By Hiveminds
Created 2008-07-17 17:26

Just about every one has seen the object tag when embedding flash animation into a HTML page. Did you know that the tag can be used to include other types of objects as well? For example, you can use the tag like an include() function to display files within the borders defined by the tag. You could use this to include separate header and footer files even though you do not have server-side include support.

This code shows how to use the tag to accomplish including a "footer" file in a Web-page. Note the use of the 'data' attribute to identify the html page file that is to be displayed inside the main page (archive.html).

<html><head></head><body>  
 <object data="archive.html" type="text/html"></object>
 <p>back up content</p>
 </body></html>

The included HTML file, which acts as the "include" file,should have

<style type="text/css"> body { overflow:visible; border:0px; } </style>

inside its header to avoid a black border.

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title></title>
  <meta name="robots" content="noindex,nofollow" />
  <meta name="googlebot" content="noarchive" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css">
    body {overflow:visible; border:0px; background-color:#d4dde4;
         }
  </style>
 </head>
 <body>
  <!-- archive module: -->
  <table>
   <tr>
    <td align="left">
     <h6><a href="../contact.php" title="Contact owner">Contact</a> | <a href="../about.php" title="About This  Site">About</a> | </h6>
    </td>
    <td align="right">
     <table cellspacing="0">
      <tr>
       <td>
        <h6><a href="" title="Legal: Copyright"> 2006</a></h6>
       </td>
       <td>
        <h6><a href="../" title="Organization">Programmabilities.com</a>. All rights reserved. <a href="http://creativecommons.org/licenses/by/2.5/legalcode" title="Legal: Terms of Use" >Terms of Use</a> | <a href="http://creativecommons.org/licenses/by/2.5/legalcode" title="Legal: Privacy Policy" >Privacy Policy</a></h6>
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
  <!-- END archive module. -->
 </body>
</html>

If you want to test this you can just place the code on a HTML page and surf to it in your browser. Since the code is run but you have not yet placed the file that is to be included you will be greeted by a:

Not Found

The requested URL /hiveminds.co.uk/archive.html was not found on this server.

IE6 and IE7 behave differently and need to have the classid for the object present. This is the same as when flash is embedded. You can also back up the content so that you do not get a file not found.


<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="archive.html">
<p>backup content</p>
</object>
<![endif]-->


Happy Publishing!

Links

Source URL: http://www.hiveminds.co.uk/content/how-to-include-a-html-file-in-another-html-file.html