Html tute 6: Frames
July 31st 2006 01:05
Today I'm going to deal with frames. Frames are a controversial part of HTML web design, with many people feeling that they aren't a good design mechanism. However, I'll show you how to use them and then you can judge for yourself.
Frames divide the page into different sections. One major use for this is allowing you to have a menu down the left hand side and clicking on the options changes what is on the right hand side.
The first tag I will introduce is the frameset tag, which takes the following form.
<frameset division="something%, something%>
If you want to divide the page into two columns, each of which takes up 50% of the page you would write:
<frameset cols="50%,50%>
On the other hand if you wanted two rows you would type:
<frameset rows="50%,50%>
Either of these pieces of code will create two frames, but it wont add any content to either.
To add content to a frameset you use the: <frame src> tag. Your first use of this tag will define the contents of the first frame, and the second use will define the contents of the second frame (and so on).
This tag takes the following form:
<frame src="webpage.html">
As always, if the frames contents is in the same directory as webpage then you can just write the webpage name, but if it isn't you have to provide the whole URL.
So, lets create a new website, which we will call frames.html
Add the following code to it:
<html>
<head>
<title>Frames demonstration</title>
</head>
<frameset cols="25%,75%">
<frame src="lesson3.html">
<frame src="lesson4.html">
</frameset>
</html>
Note that the frameset tag is also closed by the </frameset> tag at the end.
Now, the next thing we'll do is make it so that when you click on a link in the left frame it opens it in the right one.
To do this we first need to give our right hand frame a name. So lets call it display. We do this with the following code:
<frame src="lesson4.html" name="display">
Now, we need to open lesson3.html and change the code below:
<a href="lesson1.html">This is the first lesson we learned</a><br>
<a href="lesson2.html">This is the second lesson we learned</a><br>
<a href="http://www.google.com">This is a link to Google</a>
<br>
<a href="extra.html">This links to the extra website</a><br>
<a href="extra.html#second">This takes us straight to the second part of extra</a>
To each link here we add the following code:
target="targetframe"
So the first link would become:
<a href="lesson1.html" target="display">This is the first lesson we learned</a><br>
Do this for all the links.
So lesson3.html would now look like:
<html>
<head>
<title>Lesson 3</title>
<head>
<body>
<a href="lesson1.html" target="display">>This is the first lesson we learned</a><br>
<a href="lesson2.html" target="display">>This is the second lesson we learned</a><br>
<a href=http://www.google.com target="display">>This is a link to Google</a>
<br>
<a href="extra.html" target="display">>This links to the extra website</a><br>
<a href="extra.html#second" target="display">>This takes us straight to the second part of extra</a>
</body>
</html>
Now, going back to our frames page we will try a few more things. Firstly, the use of the <noframes> tag.
This tag takes the following form.
<noframes>
<body>Message<body>
</noframes>
The purpose of this tag is to provide an alternative page for people whose browsers do not display frames. So, we will add:
<noframes>
<body>This webpage requires frames<body>
</noframes>
To our frames page. So, in its final form our frames page should look as follows:
<html>
<head>
<title>Frames demonstration</title>
</head>
<frameset cols="25%,75%">
<frame src="lesson3.html">
<frame src="lesson4.html" name="display">
<noframes>
<body>This webpage requires frames<body>
</noframes>
</frameset>
</html>
Hope you found this useful.
Adam
Frames divide the page into different sections. One major use for this is allowing you to have a menu down the left hand side and clicking on the options changes what is on the right hand side.
The first tag I will introduce is the frameset tag, which takes the following form.
<frameset division="something%, something%>
If you want to divide the page into two columns, each of which takes up 50% of the page you would write:
<frameset cols="50%,50%>
On the other hand if you wanted two rows you would type:
<frameset rows="50%,50%>
Either of these pieces of code will create two frames, but it wont add any content to either.
To add content to a frameset you use the: <frame src> tag. Your first use of this tag will define the contents of the first frame, and the second use will define the contents of the second frame (and so on).
This tag takes the following form:
<frame src="webpage.html">
As always, if the frames contents is in the same directory as webpage then you can just write the webpage name, but if it isn't you have to provide the whole URL.
So, lets create a new website, which we will call frames.html
Add the following code to it:
<html>
<head>
<title>Frames demonstration</title>
</head>
<frameset cols="25%,75%">
<frame src="lesson3.html">
<frame src="lesson4.html">
</frameset>
Note that the frameset tag is also closed by the </frameset> tag at the end.
Now, the next thing we'll do is make it so that when you click on a link in the left frame it opens it in the right one.
To do this we first need to give our right hand frame a name. So lets call it display. We do this with the following code:
<frame src="lesson4.html" name="display">
Now, we need to open lesson3.html and change the code below:
<a href="lesson1.html">This is the first lesson we learned</a><br>
<a href="lesson2.html">This is the second lesson we learned</a><br>
<a href="http://www.google.com">This is a link to Google</a>
<br>
<a href="extra.html">This links to the extra website</a><br>
<a href="extra.html#second">This takes us straight to the second part of extra</a>
To each link here we add the following code:
target="targetframe"
So the first link would become:
<a href="lesson1.html" target="display">This is the first lesson we learned</a><br>
Do this for all the links.
So lesson3.html would now look like:
<html>
<head>
<title>Lesson 3</title>
<head>
<body>
<a href="lesson1.html" target="display">>This is the first lesson we learned</a><br>
<a href="lesson2.html" target="display">>This is the second lesson we learned</a><br>
<a href=http://www.google.com target="display">>This is a link to Google</a>
<br>
<a href="extra.html" target="display">>This links to the extra website</a><br>
<a href="extra.html#second" target="display">>This takes us straight to the second part of extra</a>
</body>
</html>
Now, going back to our frames page we will try a few more things. Firstly, the use of the <noframes> tag.
This tag takes the following form.
<noframes>
<body>Message<body>
</noframes>
The purpose of this tag is to provide an alternative page for people whose browsers do not display frames. So, we will add:
<noframes>
<body>This webpage requires frames<body>
</noframes>
To our frames page. So, in its final form our frames page should look as follows:
<html>
<head>
<title>Frames demonstration</title>
</head>
<frameset cols="25%,75%">
<frame src="lesson3.html">
<frame src="lesson4.html" name="display">
<noframes>
<body>This webpage requires frames<body>
</noframes>
</frameset>
</html>
Hope you found this useful.
Adam
| 130 |
| Vote |
Shared on
Subscribe to this blog
Comment by Cibbuano
20/20 Filmsight
Science News
Hunt Famous
Orble Post of the Day
Fat Cult
Techbreak