asked on

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  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

pinaldave

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

ASKER CERTIFIED SOLUTION

pinaldave

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

C7Swill

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

phpisthefuture

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.

pinaldave

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

C7Swill

You could also keep it as a javascript file and use:

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

to echo your tables.

daleoran

For the include to work so servers require the web page to have the extension .shtml instead of .htm or .html
Try that

Michael

daleoran

for example
index.shtml
which will have

in the code

Michael

SOLUTION

knightEknight

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dakyd

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>

EverLearningCodeMonkey

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

Esopo

>>1. I tried  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.

Delacourt

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

Delacourt

cant use include in an html page !

SOLUTION

Havin_it

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Havin_it

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.

ninteen83

try this

<iframe src="menubar.html" width=755 height=165 frameborder=0 scrolling=no></iframe>

Havin_it

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.

SOLUTION

sgreeny12

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sgreeny12

Also the good thing is you can even do this using the few php codes that dreamweaver has preset. Enjoy!!!

anandhariharan

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

homewabbit

Here is code to have an html page inside an html page.

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

HomeWabbit/*