Wednesday, 15 August 2012

HTML lesson #5 - Frames


In this lesson we will learn about frames. Frames are a useful way to make websites download quicker because they divide a page up into sections and frames also make a website easier to maintain.

Your first frames page

When we want to use frames we don't use the <body> tags for the beginning and end of the content of our page, we use the <frameset> tags. We use the <frame> tag to create a frame. You need to start off by creating a new file called index.html. Now type and save the following in the file you've just created:
<head>
<title>My frames page</title>
</head>

<frameset cols="100,*">
   <frame src="menu.html">
   <frame src="home.html">
</frameset>
 
Now you need to create 2 files called menu.html and home.html. Put the opening and closing body tags in them but make menu.html have a red background and home.html must have a blue background. Here's what it should look like:
menu.html
<body bgcolor="red">
</body>
 
home.html
<body bgcolor="blue">
</body>
 
Make sure you save all of them in the same folder then open index.html in your web browser. You should see a 100 pixel wide, red section on the left hand side of the screen and a blue section on the right hand side of your screen. As you can see the frame document has put menu.html in a 100 pixel wide frame and it has put home.html in the frame on the left. If you look at the code for the frame page you'll see cols="100,*" in the <frameset> tag. This makes 2 columns with the first one 100 pixels wide and the second column as wide as the rest of the page. You can have more columns by adding in more lengths to the cols attribute so if you want 3 columns then it would be cols="100,100,*".
If we want menu.html at the top and home.html at the bottom of the page then we use rows instead of cols:
<frameset rows="100,*">
   <frame src="menu.html">
   <frame src="home.html">
</frameset>
 
This time you should see a 100 pixel high red section at the top and a blue section at the bottom of the page.

Rows and cols together

If we want to put 2 rows into a page with 2 sections in the bottom page we have to use another <frameset> tag inside the first one. We will also have to create another file called heading.html which will have a green background:
<frameset rows="100,*">
   <frame src="heading.html">
   <frameset cols="150,*">
      <frame src="menu.html">
      <frame src="home.html">
   </frameset>
</frameset>
 
heading.html
<body bgcolor="green">
</body>
 
You should now see a 100 pixel high green section at the top of the page and a 150 pixel wide red section on the left side underneath the green section and a blue section underneath the green section as well to the right of the red section.

Making a menu

You will have to create another file with a yellow background color called page2.html for this exercise:
page2.html
<body bgcolor="yellow">
</body>
 
We must now give the frame that has home.html in it a name:
<frameset rows="100,*">
   <frame src="heading.html">
   <frameset cols="150,*">
      <frame src="menu.html">
      <frame src="home.html" name="mainframe">
   </frameset>
</frameset>
 
At the same time we must create 2 links in menu.html:
menu.html
<body bgcolor="red">
<a href="home.html" target="mainframe">HOME</A><br>
<a href="page2.html" target="mainframe">PAGE2</A>
</body>
 
The target attribute in the A tag makes it display the page in the window called mainframe. If you click on PAGE2 then it will display page2.html in mainframe and if you click on HOME then it will display home.html in mainframe.

Other useful frame attributes

You will have noticed the grey border around each frame by now. We can make the border wider or get rid of it with the border attribute. If we want the border wider we can set it to something like 9 or if we want it to not be there then we set it to 0 like in the following example:
<frameset cols="100,*" border="0">
<frame src="menu.html">
<frame src="home.html">
</frameset>
 
We can also change the border color and if the borders can be resized:
<frameset cols="100,*" bordercolor="black" noresize>
<frame src="menu.html">
<frame src="home.html">
</frameset>
 
When you have a lot of text in a frame a scrollbar will appear but if you don't want the scrollbar to appear you can turn it off for that frame with the scrollbar attribute:
<frameset cols="100,*">
<frame src="menu.html">
<frame src="home.html" scrolling="no">
</frameset>
 
You may also want to change the space between frames. For this we use the framespacing attribute:
<frameset cols="100,*" framespacing="50">
<frame src="menu.html">
<frame src="home.html">
</frameset>