include a html page in my html page

I want to include a html page in my html page. How can i?

All my html pages has a common header so I want to know how to include a html file as header in all my html documents. When I want to update header, i just need to update one file only.

1. I tried <!--#include file="header.html"--> but it does not show in the browser but shows in the dreamweaver.

2. I have used a lot set of tables and images and scripts in the header.html and how can i convert this to .js so that i can use <script language="JavaScript" type="text/javascript" src="header.js"></script>

Explain me the best solution.

Thanks

Zafar
mohamedzafarullahAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
pinaldaveConnect With a Mentor Commented:
Hi mohamedzafarullah,

you can use aother server side language to do this if you wish.

Regards,
---Pinal
0
 
pinaldaveCommented:
Hi mohamedzafarullah,

you can not include page into the page.
There is one way you can do something like that... is Iframe
http://www.yourhtmlsource.com/frames/inlineframes.html


Regards,
---Pinal
0
 
C7SwillConnect With a Mentor Commented:
Check out http://bignosebird.com/ssi.shtml

You need a server that can do includes.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
phpisthefutureCommented:
Yes you will need a server side language. Just an example, if you were to use PHP:
design your navigation/menu in a seperate page and name it menu.inc
then use <?php include "menu.inc"?> where you want to show the menu on the page. So if you change anything in the menu page, it will change on all of your pages. It's the idea :)
Good luck.
0
 
pinaldaveCommented:
Hi mohamedzafarullah,

I am not sure which lanaguage you are using for server side... that is why I have tried to give the answer which is not related to any lang.
for ColdFusion <cfinclude template="yourfile.cfm">

Regards,
---Pinal
0
 
C7SwillCommented:
You could also keep it as a javascript file and use:

document.write('<font color="blue">My Header Content.</font>');

to echo your tables.
0
 
daleoranCommented:
For the include to work so servers require the web page to have the extension .shtml instead of .htm or .html
Try that

Michael

0
 
daleoranCommented:
for example
index.shtml
which will have
<!--#include file="header.html"-->
in the code

Michael

0
 
knightEknightConnect With a Mentor Commented:
I agree that a server-side include solution is much better ... but if a client solution is your only choice, then you can try this:


<HTML>

<HEAD>
<SCRIPT language='JavaScript'>

 function include(url)  // must be a fully qualified URL, I don't know why
 {
   if ( document.all )
   {
     var xml = new ActiveXObject("Microsoft.XMLHTTP");
     xml.Open( "GET", url, false );
     xml.Send()
     document.writeln(xml.responseText);
   }
   else  // Netscape code from http://www.experts-exchange.com/javascript/Q.20290896.html
   {
     if ((location.host=='' && url.indexOf(location.protocol)==-1) || url.indexOf(location.host)==-1)
     {
       netscape.security.PrivilegeManager.enablePrivilege("UniversalConnect");
     }

     var dest = new java.net.URL(url);
     var dis  = new java.io.DataInputStream(dest.openStream());
     var res  = "";
     while ((line = dis.readLine()) != null)
     {
       res += line + java.lang.System.getProperty("line.separator");
     }
     dis.close();
     document.writeln(res);
     return res;
   }
 }

</script>
</head>

<BODY>
<BR><B>See the included file below:</B><BR>

&nbsp;<p>
<div id="test">
<SCRIPT language='JavaScript'>
   // must be a fully qualified URL -- can be any type of file (html,jsp,asp,etc)
   include("http://yourserver.com/header.html");
</SCRIPT>
</div>


</body>
</html>
0
 
dakydCommented:
Another suggestion for a client-only solution is below.  It uses a hidden iframe, but actually renders the content inside a div.  It should avoid having to deal with ActiveX and the streams if that's not to your liking.  Hope that helps.

<HTML>
<HEAD>
     <script type="text/javascript">
     function copyText()
     {
          var d=window.frames["innerFrame"].document.getElementsByTagName("body")[0].innerHTML;
          document.getElementById("theHeader").innerHTML = d;
     }
     </script>
</HEAD>

<BODY>
<div id="theHeader"></div>
<IFRAME name="innerFrame" src="THE URL OF YOUR HEADER GOES HERE" onload="copyText()" style="display: none"></IFRAME>
</BODY>
</HTML>
0
 
EverLearningCodeMonkeyCommented:
Hi Zafar,

The piece of code you've presented looks like ASP, as has been suggested by several people a server side include solution would best suit your needs.

Having the include line of code in the document isn't enough, the page will have to be served up through a webserver and the "parent" document will have to have an extension of .asp or .php or whatever server side scripting language you are currently using - the "included" document can be left as is.

If you're using Dreamweaver and the line of code you gave was ASP can I also assume that you're working on a windows machine?  If so then setting up either "Personal Web Server" for Win 9x or IIS on Win2K/XP would help solve your problem, these windows componets turn your local machine into a webserver as well and you will be able to view your pages as they would be displayed from a webserver.

There may be a little more overhead involved with this process but when in place its a very elegant solution to the problem that you are facing.  I've got a similar setup on my own box and I find it extremely useful.

Hope this helps,

Scott
0
 
EsopoCommented:

>>1. I tried <!--#include file="header.html"--> but it does not show in the browser but shows in the dreamweaver.<<

It won't show in your browser if you haven't set up a server to work with. This is because the SSI (Server Side Includes), which is the name for the code you are using, needs an able server to work.
By able server I mean just about any of the "big" servers like IIS (Internet Information Service) for Windows and Apache for Win or Linux.


>>2. I have used a lot set of tables and images and scripts in the header.html and how can i convert this to .js so that i can use <script language="JavaScript" type="text/javascript" src="header.js"></script><<

This is a reasonable include method when you don't want to depend on your server. The tricky* thing is "header.js" must be coded in the form of javascript language, so you would have to set the code in javascript form, as C7Swill stated above:
******************************
document.write('<font color="blue">My Header Content.</font>');
******************************

You must wrap every line of HTML that you want to insert wth document.write( -html content - );


You can also use the IFRAME solution proposed more than once above, but that won't yield the result you want for your site. An Iframe is a frame that floats inside your page.

Do you have server side scripting available? ASP, PHP, Perl, ColdFusion, etc?
Every server side scripting language has a way to include pages. If you do have one tell us and will hand you a one-line code to fix your problem, but first you'll need to either setup a server in your local machine or test the pages directly in the final host.

In conclution, if you plan to wok and improve your current site for a while, I suggest you go server side. I you just want to get this out of the way for now and never look back, go with the javascript or Iframe.

Hope this helps,

Esopo.
0
 
DelacourtCommented:
page to be included can be html

page that it must be included in should have an <iframe> if you dont have php
or have index.php and inside: right:

included(header.html);

Just my two cents worth
0
 
DelacourtCommented:
cant use include in an html page !
0
 
Havin_itConnect With a Mentor Commented:
Back to the js include for a moment, you can in principle use just one document.write statement, but that means the HTML inside it has to be one (very long) unbroken line, no line-breaks are permitted. Consider:

document.write('<table width="100%" cellpadding="0" cellspacing="0">\n<tr>\n<td width="50%">Blah blah blah</td>\n<td width="50%">More blah blah blah</td>\n</tr>\n</table>');

*Actually you could probably do without the \n line-breaks, since I've yet to see a browser that'll echo this output to the source-view.

While this seems graceless and a pain to make updates, it can be quite painless if:

you keep a normally-styled version of the header HTML (without the js bits) for easy editing, then go through it with a find/replace function or program to remove the linebreaks. Provided your HTML uses only double-quotes and your javascript uses single quotes, that's all you need to do to get a usable string to update your .js file.

Having said all that, I'd probably just use an Iframe too...
0
 
Havin_itCommented:
Hmm, my example didn't quite come out as planned. That can only mean those scamps in Engineering have finally fixed the board to wrap long lines. Dang.

Anyway, I'm sure you get the idea.
0
 
ninteen83Commented:
try this

<iframe src="menubar.html" width=755 height=165 frameborder=0 scrolling=no></iframe>
0
 
Havin_itCommented:
Actually it's even simpler to keep a .js file in a format that's editable and usable at the same time - this occurred to me after looking at a Linux batchfile that had a long line split across lines. Just escape the line-breaks, like:

document.write('\
\
<table>\
  <tr>\
     <td width="50%">Hello</td>\
     <td>World</td>\
  </tr>\
</table>\
\
');

Again, if you wanted to have the page edited in something like Dreamweaver, you could do so and then run a similar find-replace function to get it lookng like this.
0
 
sgreeny12Connect With a Mentor Commented:
I would use php. You would have to convert the files to php though. Or you could use an iframe.

To do it using php I would write <?php include ("header.html"); ?>

If you have anyquestions please ask.

Now you only have to edit the html file and it will change everywhere you include in php. For instance take a look at my first page code.

I brake it up so that the top is a header the same on everypage. SO is the left navigation bar and the horizontal navigation bar. I also sell the same ads on the right everypage so I just copy the template and I chage the file main.htm to the maincontect I want to use on that page. Does this help?

<table border="0" cellspacing="1" cellpadding="0" width="760" bgcolor="#000000">
  <tr>
     <td><?php include("header.htm"); ?></td>
  </tr>
  <tr>
     <td width="760"><?php include("hornav.htm"); ?></td>
  </tr>
  <tr>
     <td><table border="0" cellspacing="0" cellpadding="0" width="760" bgcolor="#ffffff">
  <tr>
     <td width="160" valign="top"><?php include("leftnav.php"); ?></td>
     <td width="400"><?php include("main.htm"); ?></td>
     <td width="200" valign="top" align="center"><?php include("right_ads.htm"); ?></td>
  </tr>
</table</td>
  </tr>
<tr>
<td bgcolor="#ffffff" align="center" colspan="3"><?php include("footer.htm"); ?></td>
</tr>
</table>
0
 
sgreeny12Commented:
Also the good thing is you can even do this using the few php codes that dreamweaver has preset. Enjoy!!!
0
 
anandhariharanCommented:
Hi

Try this simple one.

<html>
<script>
     function loadFile()
            {
                    window.open('header.html','testFrameId');//testFrameId is the ID of the iFrame
            }
</script>
<body onload="loadFile()">
<table>
    <tr>
        <td><iframe id="testFrameId" style="width:100%; height:100px;"></td>
    </tr>
</table>
</body>
</html>

------------------------End of Code-------------------------------

All the Best

Anand
0
 
homewabbitCommented:
Here is code to have an html page inside an html page.

<iframe width="400" height="300" src="http://www.myresults.com/"></iframe>

HomeWabbit/*
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.