iFrames in Website Templates

Using IFrames


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.

Sample IFrame:
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.

<style type="text/css">
/* css code goes here */
</style>

Options:
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"> </IFRAME>



Related Topics:
Target links and IFrames
More Scripts


Allwebco Template Support


Allwebco Website Template Support


See Also...
Scripts & Add-ons


See Also...
Scrolling News
Target links and IFrames



Allwebco Web Templates
Complete websites with built in scripts.
AllwebcoDesign.com
Web Site Templates
HTML5 Web Templates
Web templates configured for iPad and iPhone, iPod.
AllwebcoDesign.com
Web Template Support
Business Web Templates
Professional business website templates.
AllwebcoDesign.com
Web Site Templates
Shopping Cart Templates
Professional templates with built-in Paypal.
AllwebcoDesign.com



Website Template Support
Website Template Support