Home
HTML and CSS
Tutorials
Iframes Basics
Level: Beginner Software:
1.Here, is where I'll show you this lovely little trinket called IFrames. What it does is it can load a whole new page (ie. html, php, etc..) within or embedded in your current page. This really lets all those people who want to have lets say a news box within their graphical interface but not have the user to scroll down the whole browser window.
For starters, heres how to create a basic IFrame:
| <iframe name="whatever name you please" src="yourpage.html"></iframe> |
Not too hard now was it, but if you want to customize it, such as allowing scrolling, the size, borders or not, etc.. The following will be a list of parameters which you can use to make your IFrame fit your need.
2.Parameters can be added anywhere in the first opening tag, most commonly just place them after the src=" " here.
width=" " - Measured in pixels, the value added to this will determine how wide your IFrame is.
height=" " - Same as width except this value sets height
frameborder=" " - Want a default border around your IFrame. 1 is on 0 is off.
scrolling=" " - Want your IFrame to have scrolling capabilities? 1 is on 0 is off.
marginwidth=" " - Since the IFrame acts like a page it has margin settings as well. This adds margins to both sides of your IFrame.
marginheight=" " - Same as above except adds margins to top and bottom of IFrame.
align=" " - If you want your IFrame to align to left, centre, or right you can adjust that here.
vspace=" " - Similar to cellspacing, it leaves a gap on the tops and bottom of the IFrame.
hspace=" " - Similar to cellpadding, it leaves a gap on the sides of the IFrame.
allowtransparency=" " - This allows for transparency in the background.
However it only works if you have the following parameter in the <body> tag.
| <body style="background-color: transparent"> |
3. Finally, what if the persons browser doesn't support IFrames, you can let them know by doing the following
| <iframe name="myIFrame" src="test.html" width="250" height="100" scrolling="1"> |
Your browser doesn't support IFrames. If you are using Netscape Navigator, version 4 or older will not work with IFrames, please get newest version.</iframe>
Example of IFrame Below
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com