Home

<--Back

Tutorials -- HTML -- IFrames How To

Okay. Iframes is a difficult thing to learn how to use but saves alot of trouble, eg dont have to change the codes on every page of your site to make an adjustment to your layout.

We will start with the basic iframes code:

Okay the best way to understand iframes is to see it as a box to another window of your site. After clicking a link everything inside the box will refresh and reload while everything outside stays the same. Iframes is mainly only used for scroll box layouts. Doesnt really work for long stretch ones.

So here is what you need to do.

Create your index page (or if you have a splash page just a page for your layout) all the coding for your layout will go on this page. Then insert the iframes code onto this page and change the values so it matches up with the text area drawn on your layout by changing the width, height, top and left distances.

iframe name A simple name for your iframe to direct links to the box (explained later)
frameborder If you want your box to have a border replace this with 1 etc
width Replace the 0 with the width of your box (horizontal length)
height Replace the 0 with the height of your box (vertical length)
top Replace the 0 with the distance you want the box from the top of the screen
left Replace the 0 with the distance you want the box from the left of the screen
src Put the url of your content page that you want displayed first on your iframes box
scrolling If you dont want your box to scroll delete this
style If you dont want your box to be transparent delete this section

Some of these sections may be deleted from the code if not needed.

Okay now to explain the content of the box. for: src="external.html, section of the box you need to put the url of the content page you want displayed first. Usually this consists of your update or welcome page of the site. You do not need to put your website layout html or anything but text or text modification html in all the other pages of your site.

Here is an example below of what you would put in your content page:

This will show up in your iframes box looking like


So basically I replaced the src section with "http://www.sariyusdomain.com/tutorials/iframeeg.htm" because this is the default page I want displayed inside. So now that is explained. But that is not it. Just one last little bit of information for you.

All your links in your navigation bar will need to be directed to the inside of the box. all you need to do is use this code within the link html:

Okay that is simple enough. Here is an example of it in work.

Link One | Link Two


All links that are included within the iframes box. For example your sub navigation does also need to have the target="IFRAME NAME" extension in the link html.

I hope I have explained it okay. If you have any questions please dont hesitate to ask me.

If there is a problem with this code please let me know and I will fix it asap.