Level: Intermediate -Advanced
An Iframe is an Inline Frame. Though this requires a slightly more in-depth understanding of HTML, simply put it is like a frame that is embedded inside a webpage and then other web pages can be loaded inside these frames and all that is done within the same main webpage.
<iframe src="http://www.abc.com" width="99" height="99" name="main" marginwidth="10" marginheight="10" frameborder="0" hspace=10 vspace=5 scrolling="yes"></iframe>
- src="http://www.abc.com” where src stands for source and this will be the page that the iframe will load.
- width="99" and height="99" you can adjust the settings to width="100%" or something similar. It determines the size of the iframe in terms of width and height.
- name="abc" It is the "name" of the frame, so if you want a link to load a page in that frame, and you've named the iframe "abc", then the code of the link should include the address of the target page as target="abc"
- marginwidth="10" and marginheight="10" refers to the margins leaving which the actual content of the webpage inside the iframe appears.
- frameborder="0" is the thickness of the border around the iframe. The value within the
- scrolling="yes" means that a scrollbar is mandatory, put "no" if you don't want scrolling, and "auto" is for automatic scrolling that is if you want scrolling only when its needed.
- hspace and vspace is the horizontal space to the right and left of the iframe or vspace which is the vertical space above and below the iframe.
However one of the disadvantages of using Iframes is that it is extremely difficult for a crawler to get to a page that is controlled by an iframe in a natural way. So, you can not expect a search engine to look at your site, and figure out most of the layout on its own if you use Iframes. That being said, if you use a site map to tell the crawler about the different pages on your site, you should not have a problem. Note that Netscape 4 does not support frames but Internet Explorer 4+, Netscape 6+, Firefox, Mozilla, Opera and other modern browsers all support Iframes.
This can be solved by an alternative method besides having a separate site map. You can choose to use a Meta tag in this fashion.
<title>MAIN TITLE HERE</title>
<META NAME="description" CONTENT="TYPE DESCRIPTION HERE">
<META NAME="keywords" CONTENT="LIST KEYWORDS HERE, separate with commas">
For example:
<title>Web Design Frames</title>
<META NAME="description" CONTENT="A tutorial for using frames">
<META NAME="keywords" CONTENT="tutorial, frames, design, layout">
A code snippet for a transparent frame, this will allow the Iframe to have a transparent background so you can actually see the background behind it. Using this method you can have multiple frames and rotate more content on your site. Note that you have to use both the codes, the frame and the CSS codes.
<iframe src="http://www.abc.com" height="100%" width="100%" name="abc" allowtransparency="true"></iframe>
In the <head> section add this; this is for CSS or Cascading Style Sheets:
<style type="text/css">
body{background:none transparent}
</style>
- Despite the seeming drawbacks, frames are successfully used by many websites and they offer a very professional and neat presentation.
- Faster loading as only a page on or off your site has to load inside the frame instead of the whole webpage and additional content of another page.
- They are also easy to manage and you can just change one link, which will change the whole page instead of multiple changes across many pages.
- A single page can support multiple Iframes.
- You can also link one Iframe to another and make instant updates to all pages simultaneously.
- An Iframe can be used to display a series of pictures/information that can keep changing in a smaller single frame while there is a static background, this is called floating a frame (that’s because the smaller frame floats on the larger background).
Hope this tutorial has helped you to make basic Iframes. Try these simple codes and experiment for a neat-looking layout that’s easy to handle.
This article is the property of http://www.Elegant-Templates.com
Copying and publishing any article from our site is allowed but you have got to give us a back link and keep the author info in tact. |
