iFrames in Website Templates
An IFrame is HTML code that you can use to put one HTML page, PDF page, CGI script or almost anything into another HTML page.
Below is an embedded HTML page:
Embedding one HTML page into another:
To add an IFrame to one of your pages. First, create a page called framepage.htm. Next select and copy the following code, then paste it into the content area of a template page like the about.htm. Paste this after some text or an image. (See next section for css code.)
CSS for the above IFrame:
Copy and paste the following to the bottom of your template global .css file. The css height and width will overwrite the IFrame code so edit the following with your height and width.
If you do not have a global css file, add the above code to the head section of your webpage between the following tags.
/* css code goes here */
In the above example you can change the width and the height to any sizes you would like for your IFrame. You can also change the border to 1 or 0, or you can change the scrolling to "no" or "yes" and the "overflow" to "visible" or "hidden" or "auto". You will edit the "Framename" with any name you would like for your IFrame.
Links to change the IFrame:
In the HTML page that you are adding the IFrame to, you can add links to change the page inside the IFrame. These links will target the IFrame name (Framename in this example). Here is an example link:
<a href="newpage.htm" target="Framename">Link Name</a>
Links inside the IFramed page:
For links you add to the page inside the IFrame you may want to target your links to have them open inside, or outside the IFrame. See the
See the new window links and target links support page. Here is an example of linking to open a page outside of the IFrame:
<a href="newpage.htm" target="_top">Link Name</a>
Embedding a script, site or application into an IFrame:
An IFrame can also be used to integrate a script such as a forum, blog, PDF files, applications such as a calendar or almost anything else you would like to show on an HTML page. To do this simply change the link in the code above. For example, instead of have the IFrame embed the "framepage.htm" you can use a full link to your forum or blog. For example "http://your-domain.com/cgi-bin/forum.cgi" would intergrate a forum script named "forum.cgi" in the "cgi-bin" folder at your-domain.com. (See "options" above)
Sample website in an IFrame page:
Here is an example of the Allwebco website embedded inside an IFrame:
Below is the code that embeds the above page, or you can view the source of this page to see the code:
<IFRAME name="Framename" src="http://allwebcodesign.com/setup/index.htm" width="500" height="600" frameborder="1" scrolling="yes">
Target links and IFrames