HTML Tutorial 005 - Frames
Other Tutorial Options:
 |
Frames are not very commonly used in websites but the can be useful in some instances.
Basically frames will split up your browser screen so that it is possible to view two or
more different web pages at once.
In order to use frames in a web browsers screen you first must begin with the <frameset></frameset>
tags. Open up your HTML file in your text editor and we will get started. Along with the frameset
tags it is also suggested to use the <noframes></noframes> tags for the browsers that
do not support frames. Here is how you would set up an HTML file with frames.
<html>
<head>
<title>My Web Page</title>
</head>
<frameset>
<noframes><body>Your browser does not support frames.</body></noframes>
</frameset>
</html>
As you can see the <frameset> tags replace the <body> tags and encompass
everything that will appear on the page. The <noframes> tags is what will appear if a
browser does not support frames so within that you would add the <body> tags as you
would any other page and treat everything within it as such.
Now that we have the basic layout of frames set up we can actually make the frames. We will
have two different frames in our browser screen. In order to do this we must define the width
or height of our frames. I will split our screen vertically:
<frameset cols=”50%,50%”>
<noframes><body>Your browser does not support frames.</body></noframes>
</frameset>
The cols=”” attribute stands for columns and to define the width of our frame in ‘cols’ we use a percentage. This is the percentage of the whole browsers viewing window width. If you test your page out now you will notice that nothing happens and we just have a white screen. To make frame work we must also have the <frame> tag. This is similar to the image tag in the fact that it does not have a separate closing tag and we use the src=”” attribute.
<frameset cols=”50%,50%”>
<frame src=”http://www.darkscarab.com”>
<frame src=”http://www.shop.darkscarab.com”>
<noframes><body>Your browser does not support frames.</body></noframes>
</frameset>
If you test that out in you browser you should see the two different frames and the two different web pages to load. This is basically what frames do. You can also make as many frames as you like vertically or horizontally or a combination of both. To make the frames go horizontally you would use the rows=”” attribute rather than the cols=”” attribute. To do a combination you would put a frameset within a frameset.
<html>
<head>
<title>My Web Page</title>
</head>
<frameset rows="50%,50%">
<frame src="http://www.forum.darkscarab.com">
<frameset cols="50%,50%">
<frame src="http://www.darkscarab.com">
<frame src="http://www.shop.darkscarab.com">
<noframes><body>Your browser does not support frames.</body></noframes>
</frameset>
</frameset>
</html>
There are a few other things you can do with frames. If you test out your HTML page now you
will see that you can adjust the size of your frames. You can disable that feature by adding
the noresize=”noresize” attribute in your frameset tag.
There are many reasons why you don’t see many people use this feature. One of which is that
if you plan to run a website with it, you must have multiple HTML files in order to fill out
all of the frames. You cannot just enter information into the tags. Another reason is
that it will take much longer to open up the page. Since each frame needs its own separate
HTML file to show the browser has to find and open up multiple files.
Even though there are these disadvantages frames can be useful. Feel free to experiment with
frames as much as you like. You can find more information about frames at
W3Schools.
This site sets the standards for many of the web development languages and are a good source to have
when you need a reminder on any of the different concepts of HTML.
|
|
 |