Basic Iframe Code

Inline frames are getting used more and more frequently around the internet, one of the most frequent problems is that Iframes aren't used correctly. I have written this tutorial to hopefully teach you how not to make any mistakes when it comes to using these quickly growing alternatives to frames.

Basic Iframe code

Explanation

Now you see we have opened the iframe tag which is <iframe>. Next we will give the frame a name, name="", this can also be called an ID. id="". Then we determine the width and height of the iframe. The text Sorry your browser does not support frames or is currently not set to accept them. is what will show to those users who can't view iframes (W.A.P phones for example). Lastly we close the iframe tag by using </iframe>.

I have given the frame a name because if you want to open a page inside a frame it needs a name so you can target it. Remember on links you have the target attribute, well give the link a target name the same as the name you have given the inline frame and your page will open up inside the frame. e.g.

Click here to change the page inside the iframe

The code used for this was:

<a href="page2.html" target="example"> Click here to change the page inside the iframe</a>

To change it back you simply need the same code but with a different HTML page. change the frame back.

What else can I do with my Iframe?

You may be thinking what else can I do with my iframe to make it look nicer or work better, well I will give you a list of attributes that can be used with the iframe and their meanings.

scrolling=" yes / no / auto " frameborder=" any number, 0 for none, the higher the number the thicker the border "

Using CSS with the border.

Inside the iframe tag you can use CSS to customize the way the border looks, I have given a list of all the different types of borders, remember to keep frameborder"0" in the code otherwise the border will look ugly:

style="border: 1px solid black" style="border: 1px dotted black"
style="border: 1px dashed black"
style="border: 1px double black" (set frameborder to 1 for this to work)
style="border: 1px groove black" (set frameborder to 1 for this to work)
style="border: 1px ridge black" (set frameborder to 1 for this to work)
style="border: 1px inset black" (set frameborder to 1 for this to work)
style="border: 1px outset black" (set frameborder to 1 for this to work)

Remember you can change the thickness and the colour to whatever you like. In case you are lost and do not know where to put these codes I will show you an example. e.g.

And there you have it, you now know basically everything there is to know about inline frames.