Recently I was asked by a client to create framed pages within his website. I’m not a fan of frames because search engines don’t index them however I believe in giving the customer what they want to make them happy (even after pointing out the pros and cons of using framed web pages).
What is an iframe?
This is an HTML tag that creates a “frame” inside an HTML document. The iframe can be a photo, text or even a whole web site nested within the page. It will not be obvious to the viewer of the web page but if you look at the source code you’ll recognize the iframe code.
How to Nest an iFrame within a web page
For my client’s website I needed to create 3 framed pages within one web page. To accomplish this I simply created a 3 page website then used an iFrame to embed it into the web page. Here are the details:
1. Create a separate website within its own folder
I built 3 web pages and placed them all in one folder named “TEST”
crew.html: contains text and photos
cast.html: contains photos
synopsis.html: text
Note:
You may need to rename one of these pages to index.html for the website to display correctly.
2. Upload folder to the server
The folder was uploaded to the same server where the main website is hosted. For example the folder is named “TEST” so it becomes a sub-directory of the main domain (ie http://www.thegodwinspro.com/TEST/)
3. Nest the iframe within the web page
To place the framed website (TEST) within the web page I inserted this code to position it correctly.
<div align="center">
<iframe src="http://www.thegodwinspro.com/TEST/" width="700" height="600"
frameborder="0" scrolling="auto" name="myInlineFrame"></iframe></div>
</div>
When you click on any of the links named crew, cast or synopsis at http://www.thegodwinspro.com/home.shtml a different web page is displayed inside the window.
Explantation of iframe attributes
iframe src: link of the website to be framed within the web page.
height and width: adjusts the size of the iframe
frameborder: this is turned off by setting it to “0” so there is no border around the iframe
scrolling: this is set to “auto” so scrolling is enabled for visitors to see the whole frame.
name: you can name your iframe anything you like.
iFrame uses
- Syndicate content
- Display a gallery of photos
- Create a contact form that can be used on multiple websites
- Embed a different website within your own site so visitors don’t leave yours.
Related articles
Content Syndication – How to Create an iFrame
************************
Need to create an iFrame for your website but lack the time and expertise to do it yourself? Don’t worry..please visit Professional web design in Maryland
Quite beneficial. Thank you.