How do I include one HTML file in another?
Server side includes are a simple way to tell your web server to insert various things at various points in your HTML page. You can use them without major changes to your existing pages. However, some web servers require that you name your file .shtml rather than .html in order to enable the parsing of your file by the server in order to find server side include directives. If server side includes don't appear to work, try renaming the page with a .shtml file extension before you give up.Of course, server side includes only work when a web server is being used to access your pages. This is only an issue when testing your pages on your local hard drive. If this becomes a problem, it may be time to install a web server on your own computer, for local testing purposes. After all, Apache is free for Windows, and both free and standard in Linux and MacOS X.
A simple server side include directive to include another file found in the same folder looks like this:
There are many more server side include directives available; for example, you can easily insert the current date into your page.IF IT DOESN'T SEEM TO WORK, TRY NAMING YOUR FILE WITH A .shtml EXTENSION, instead of .html. Please do not ignore this tip and then email me asking why it doesn't work!
For more information, see the Apache server side includes tutorial, which also covers how to configure thefree Apache web server correctly with support for server side include directives. For information about enabling Server Side Includes in Microsoft IIS, consult Microsoft TechNet.
How to Use PHP For Server Side IncludesIf your server is configured to support PHP but not server side includes, or you just prefer to use PHP everywhere, you can easily include fragments of HTML in your PHP page like this:
This is essentially the same thing as server side includes, just using a different syntax. The PHP page that contains this directive must have a .php extension and the server must support PHP. If you don't know PHP, you probably want to use ordinary server side includes instead as described above.
PHP include directives can also point at files on any website using a full URL:
Of course, you must not steal content from another website without the express written permission of the owners. To do so is a copyright violation and may lead to legal action against you.
How to Use ASP and ASP.NET For Server Side IncludesIf you are using old-fashioned ASP (.asp files), you're in luck. The server-side include commands discussedearlier in this article will work with no modifications. Naturally, your pages will have a .asp extension rather than a .shtml extension. Otherwise, no changes need be made. The files you include can also contain ASP code.Since server-side includes are compiled in advance in ASP.NET, before any ASP.NET code is run, you can't use an ASP.NET variable as part of a filename to be included. Those who require such advanced capabilities can open files on the server directly from ASP.NET code. If you don't understand this... you probably don't need it! See the Microsoft Knowledge Base article How To Dynamically Include Files in ASP.NET for more information.
One tricky wrinkle: clientSideInclude doesn't always work unless the page has already been completely loaded. So we'll need to call it from the onLoad handler of the element. That's the safest time to call because the browser has definitely parsed all of our HTML by then.
So at the point in your page where you wish to insert the file includeone.html, which is found in the same folder as the page, you'll need to do this:
And at the beginning of the body of your page, you'll need to do this:
Of course, a long, complicated onLoad handler can be very ugly. You can avoid that problem by moving the call (or calls!) to clientSideInclude to a function in a
Using iframe is straightforward. If your second, embedded document is called included.html, just place the following element in the first, "parent" document to display it in an area 450 pixels wide by 400 pixels tall:
Why do I have an ordinary a element inside the iframe element, linking to the document we're trying to embed? Because certain older browsers, and the major search engines, don't support iframe. While very few human beings are still stuck with Netscape 4, almost everyone is using search engines like Google. And we don't want those to ignore our embedded content completely!
The iframe element has additional attributes to control its appearance. In addition to setting width andheight, which you must do, you can also decide whether to allow scrolling. In most cases, you'll want to accept the default behavior: displaying scrollbars when the embedded document is too wide or tall for the width and height of the iframe element. But if you absolutely don't want to permit scrolling, even if it prevents the user from seeing all of the embedded document, you can set the scrolling attribute to no instead.
You can also eliminate the visible border around the embedded page by setting the frameborder element to0. This is important if you want the embedded page to look like a natural part of your page.
Here's the example again with no frame border:
For more information about iframe, see The Web Design Group's very thorough article on the iframeelement.
For iframe client-side includes, the situation is different. Here you are embedding a completely independent second page into the first page. So that second page should be a complete HTML document in its own right.
How can I include a file on another website in my page?
You can't do that legally without permission. Here I am assuming that both sites belong to you or your client.
It's easy enough to display a web page on another site as part of your page with the