tags:

views:

372

answers:

7

I am having 1 pure html page for ex. sample.html. I need to include this html into another pure html for ex.Orginal.html.How to do this? I am having a header image in my sample.html.It should come at the top of the Orginal.html page.

+3  A: 

You can't do such things in pure HTML, unless you use frames or iframe element. But better merge them by hand...

Michał Chaniewski
If you want to include something on a lot of pages and that information changes, you'd have to change a lot of pages. Ideally, you'd use server side technology to include the information as you end up with one page to display (less HTTP requests and better indexing) - but the question is looking for pure html answer to this problem.
Sohnee
that's my point :)I'd use something server-side, but if we're talking here about just a handful of files, the best solution would be to just update HTML - if it's pure HTML, they would need editing anyway, so why make it more complicated. In such scenario simple edit is the most pragmatic.
Michał Chaniewski
+5  A: 

If you're using Apache web server, you could try using server side includes.

Marc Novakowski
It seems IIS supports this toohttp://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/eced0b89-e052-42ff-baa8-751dd191c3b5.mspx?mfr=true
Neil Aitken
A: 

well, you can use a frameset and have the header image in the top frame, or put an iframe in sample.html and load other pages into that. However, it would be better (if your server permits such technologies) and easier on you if you used PHP or ASP... or something similar. I used to build websites the way you described, when I was like 11, and couldn't buy hosting or figure out Apache.

Just write your sample.html with the image at the top, with some sort of navigation I suppose, and to load a page into your html template, a hyperlink would look something like:

<a href="somepage.html" target="iframe_name">Link</a>

IIRC. It's been awhile since I dabbled in web design.

Carson Myers
A: 

You could use JavaScript to load some HTML from one document into another. This task is fairly simple using the jQuery toolkit:

$("The ID of a container (a div element for instance) in which you want to load
the contents of a HTML file").load("path to html file you want to load");


<div id="inserthere" />


$(function ()
{
    $("#inserthere").load("loadme.html"); // Load the contents of loadme.html
                                          // and stuff it in the div with the
                                          // ID of "inserthere"
});
roosteronacid
+1  A: 

See Include One File In Another, which has a summary of the various techniques that are available (along with their pros and cons).

David Dorward
+1  A: 

Here is an example of how to do it in pure HTML with an iframe, which although strangely not mentioned in HTML 4 specification is supported by all major browsers (and is in the HTML 5 specification)

<body>
<h1>This is original page</h1>
<p>Some content on original page.</p>
<iframe src="sample.html" width="600" height="300"></iframe>
</body>

You can adjust the width and height and you can also remove the border if you want the page to be more seamless.

Be wary of JavaScript solutions to this problem, especially if you want to be viewed on mobile devices.

Additional note: Avoid frameset solutions also, as they aren't valid markup.

Sohnee
A: 

With php, easy and the output would be hmtl:

Orginal.php

<!--headers -->
<?
include 'sample.html';
?>
<!-- rest of your site  -->
Midday