New tutorials View all
Encapsulation in PHP
Abstract classes in PHP
An introduction to MySQL databases in PHP
Creating a user login and registration system.
First Lesson of HTML
New forum replies
Jim in errorsPaul in errorsJim in Im Stuck On The Member System Tut...scott33 in Im Stuck On The Member System...Jim in Test topicCodefreek in My IRC Bot,Jim in 2.1, likes and dislikes
New frontpage replies
tutorials: Creating an IRC bot in PHPtutorials: Creating an IRC bot in PHPtutorials: Creating an IRC bot in PHPtutorials: Creating an IRC bot in PHPtutorials: Creating an IRC bot in PHP
New articles
New news
A good introduction to HTML frames (78 views)
Frames may be a bit old fashioned, but it can still be handy and it’s a must know for beginning webdevelopers. In this tutorial you will learn it all.
In this tutorial I am going to talk about framesets and how you can apply them to your own website. Framesets are mostly used because you can show different sorts of pages on one screen. For example: if you want a navigation bar, a main page and your banner on one site, then you will have to make a navigation bar and a banner on every page of your website. Framesets are the solution to this problem. Framesets are easy to use and not very hard to understand. Some HTML knowledge is needed so I suggest you first learn how to use HTML.
Getting started
When you want to make a frameset on your page, you don't have to make a <BODY> because the element <FRAMESET> will replace this.An example:
Notice that <FRAMESET> is inserted instead of <BODY>.
A frameset contains multiple pages that have been pre-made so you will have to make some pages like a navigation bar, etc.
When you have made these pages you will have put them in your frameset. By putting the <FRAME> element between the <FRAMESET> elements you can integrate pages into your frameset. Every frame has its source, so you will have to put in a source. By placing src="your page" next to FRAME it will show that page. An example on how to do this:
This frameset simply won't work because the browser doesn't know how to view the pages onscreen. That is why you will have to give your browser some instructions. When designing a frameset you will have to remember that a browser reads from left to right and from top to bottom. Columns (cols) and Rows (rows) are the two ways to split your page.A row splits your page horizontal and a column splits your page vertical. You can combine these two but we will talk about it later. You also have to give the browser a value on how much you want the frameset to show from the pages you have entered. In this example I have given my navigation 30% horizontal space of the complete page and the remaining space is for my home page.
But when I view this page I still have some problems. When I hold my mouse on the splitting line for my two frames I can move it around, but I don't want people dragging my navigation bar around because my text will also change with it.
The solution for this problem is to add a little bit of code: NORESIZE.
Example:
You don't have to put NORESIZE on all of your pages, only on the ones you don't want the visitors to resize.
I still don't like my page because I think that the split line of my frames is ugly so I will remove this by putting FRAMEBORDER="no" in my HTML code.
Example:
And of course I want to place my banner on top of my page. So I will make another frame and then split it into three pages. I will do this by combining the cols and rows element.
Example:
My banner gets 20% of the page, and then the browser will split the page and give the rest of the space to mynavigationbar.htm and myhomepage.htm. It will split the page into 30% for the navigation bar and the remaining space for my homepage.
A frameset stops when all <FRAME> and all <FRAMESET> elements are placed, and always ends with </FRAMESET> at the end of your page before </HTML>. All <FRAMESET> elements have to be closed so don't forget any.
Links in frames?
The navigation bar of my website won't work now because every time I click a link it will open in my current page and my frameset will disappear so I will have to give my frame(s) a name. You can do this by adding the NAME="the name of your frame" to your <FRAME> element.
Example:
Now that I have given my frame a name it's time to give my links a target. By adding target to your links your link will open in your desired frame. I gave my frame the name: mypage, so this link will open in the frame mypage and it will replace myhomepage.htm.
An example from my link:
This is the end of my tutorial; I hope you can now make your own framesets.
If you have any questions feel free to post it on the forums.
Written by Patrick van Bemmelen
Getting started
When you want to make a frameset on your page, you don't have to make a <BODY> because the element <FRAMESET> will replace this.An example:
| php | |
|
1 2 3 4 5 6 7 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML> |
Notice that <FRAMESET> is inserted instead of <BODY>.
A frameset contains multiple pages that have been pre-made so you will have to make some pages like a navigation bar, etc.
When you have made these pages you will have put them in your frameset. By putting the <FRAME> element between the <FRAMESET> elements you can integrate pages into your frameset. Every frame has its source, so you will have to put in a source. By placing src="your page" next to FRAME it will show that page. An example on how to do this:
| php | |
|
1 2 3 4 5 6 7 8 9 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET> <FRAME src="the page you want to place here"> <FRAME src="the page you want to place here"> </FRAMESET> </HTML> |
This frameset simply won't work because the browser doesn't know how to view the pages onscreen. That is why you will have to give your browser some instructions. When designing a frameset you will have to remember that a browser reads from left to right and from top to bottom. Columns (cols) and Rows (rows) are the two ways to split your page.A row splits your page horizontal and a column splits your page vertical. You can combine these two but we will talk about it later. You also have to give the browser a value on how much you want the frameset to show from the pages you have entered. In this example I have given my navigation 30% horizontal space of the complete page and the remaining space is for my home page.
| php | |
|
1 2 3 4 5 6 7 8 9 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET cols="30%,*"> <FRAME src="mynavigationbar.htm"> <FRAME src="myhomepage.htm"> </FRAMESET> </HTML> |
But when I view this page I still have some problems. When I hold my mouse on the splitting line for my two frames I can move it around, but I don't want people dragging my navigation bar around because my text will also change with it.
The solution for this problem is to add a little bit of code: NORESIZE.
Example:
| php | |
|
1 2 3 4 5 6 7 8 9 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET cols="30%,*"> <FRAME src="mynavigationbar.htm" NORESIZE> <FRAME src="myhomepage.htm" NORESIZE> </FRAMESET> </HTML> |
You don't have to put NORESIZE on all of your pages, only on the ones you don't want the visitors to resize.
I still don't like my page because I think that the split line of my frames is ugly so I will remove this by putting FRAMEBORDER="no" in my HTML code.
Example:
| php | |
|
1 2 3 4 5 6 7 8 9 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET cols="30%,*" FRAMEBORDER="no"> <FRAME src="mynavigationbar.htm" NORESIZE> <FRAME src="myhomepage.htm" NORESIZE> </FRAMESET> </HTML> |
And of course I want to place my banner on top of my page. So I will make another frame and then split it into three pages. I will do this by combining the cols and rows element.
Example:
| php | |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET rows="20%,*"> <FRAME src="mybanner.htm"> <FRAMESET cols="30%,*" FRAMEBORDER="no"> <FRAME src="mynavigationbar.htm" NORESIZE> <FRAME src="myhomepage.htm" NORESIZE> </FRAMESET> </FRAMESET> </HTML> |
My banner gets 20% of the page, and then the browser will split the page and give the rest of the space to mynavigationbar.htm and myhomepage.htm. It will split the page into 30% for the navigation bar and the remaining space for my homepage.
A frameset stops when all <FRAME> and all <FRAMESET> elements are placed, and always ends with </FRAMESET> at the end of your page before </HTML>. All <FRAMESET> elements have to be closed so don't forget any.
Links in frames?
The navigation bar of my website won't work now because every time I click a link it will open in my current page and my frameset will disappear so I will have to give my frame(s) a name. You can do this by adding the NAME="the name of your frame" to your <FRAME> element.
Example:
| php | |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET rows="20%,*"> <FRAME src="mybanner.htm"> <FRAMESET cols="30%,*" FRAMEBORDER="no"> <FRAME src="mynavigationbar.htm" NORESIZE> <FRAME src="myhomepage.htm" name="mypage" NORESIZE> </FRAMESET> </FRAMESET> </HTML> |
Now that I have given my frame a name it's time to give my links a target. By adding target to your links your link will open in your desired frame. I gave my frame the name: mypage, so this link will open in the frame mypage and it will replace myhomepage.htm.
An example from my link:
| php | |
|
1 |
<A HREF="thispagereplacesmyhomepage.htm" target="mypage">Click here for the new page</A> |
This is the end of my tutorial; I hope you can now make your own framesets.
If you have any questions feel free to post it on the forums.
Written by Patrick van Bemmelen
Replies on A good introduction to HTML frames:
Jump to comment page: 1
Jump to comment page: 1
You are not logged in. Please login or register an account, it just takes 30 seconds.
Especially for a first tutorial you've written, i must say you did a great job Patrick! I hope we'll see more of this coming in the future!