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.
You can't do such things in pure HTML, unless you use frames or iframe element. But better merge them by hand...
If you're using Apache web server, you could try using server side includes.
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.
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"
});
See Include One File In Another, which has a summary of the various techniques that are available (along with their pros and cons).
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.
With php, easy and the output would be hmtl:
Orginal.php
<!--headers -->
<?
include 'sample.html';
?>
<!-- rest of your site -->