Lesson 14: The Frameset Element

❮ Previous Lesson Next Lesson ❯

Generally, a webpage can only display one page at a time though it has the ability to link to other pages. However, we can allow the visitor to view two or more pages at a time by creating frames in a webpage. To create frames in a webpage, we use the frameset element.

The frameset element uses the cols attribute to specify the number columns and size of each column and the rows attribute to specify the number rows and size of each row. Besides, it uses the name attribute to identify a frame. A link can be used to open up a webpage in the target frame. When we use the frameset element, we can omit the use of the body element.

The structure for a frameset is illustrated as follows:

<frameset cols="300,"*>

It means it creates a webpage with two columns where the left frame is 300 pixels from the left edge of the webpage and the second column occupies the remaining space. We can also use % instead pixel, like this

 <frameset cols="30%,"*>

It means the left column take up 30% of the webpage's width and the other column occupies 70% of the webpage's width.

You can use similar structure for the rows attribute, like this

<frameset rows="300,"*>
<frameset rows="30%,"*>

You can also create a three or more columns or rows using the frameset elements though it is not advised to do so as it may make the webpage looks congested. For example, you can create a three columns webpage using the following syntax

<frameset cols="20%,30%,*">

The left column occupies 20% of the page's width, the middle column occupies 30% of the page's width and the right column occupies 50% of the page's width.

To load the webpages into respective frames, we can use the frame element together with its name attribute. Let's illustrate how to create a two-column webpage in the following example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<frameset cols="20%,*">
<frame name="menu" src="menu.html">
<frame name="main" src="http://htmltutor.org/">
</frameset>
</html>

The above document creates two columns, the first loads the menu.html webpage and the second column loads the webpage with URL http://htmltutor.org/. Save the above document as htmltutorial.html

Now, create the menu.html page as follows:

<!DOCTYPE HTML>
<html>
<head>
<title>Menu</title>
</head>
<body>
<h1>HTML Tutorial</h1>
<hr>
<h2>Contents</h2>
<hr>
<ul>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-1/" target="main">Lesson 1: Introduction to HTML</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-2/" target="main">lesson 2: HTML Elements Part 1</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-3/" target="main">Lesson 3: HTML Elements Part 2</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-4/" target="main">Lesson 4: Types of Lists</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-5/" target="main">Lesson 5: Adding Colours to a Webpage</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-6/" target="main">Lesson 6: Inserting Graphics in a Web Page</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-7/" target="main">Lesson 7: Building Links</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-8/" target="main">Lesson 8: More on Links</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-9/" target="main">Lesson 9: Creating Tables</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-10/" target="main">Lesson 10: Advanced Table Elements and Attributes</a></li>
<li><a href="http://htmltutor.org/index.php/html-tutorial-lesson-11/" target="main">Lesson 11: More advanced Table Elements and Attributes</a></li>
<li><a title="Lesson 12" href="http://htmltutor.org/index.php/html-lesson-12-using-special-characters-in-html/" target="main">Lesson 12: Using Character Entity References in HTML</a></li>
<li><a title="Lesson 13" href="http://htmltutor.org/index.php/html-lesson-13-meta-element/" target="main">Lesson 13: Meta element</a></li>
</ul>
</body>
</html>

The target attribute of the anchor tag is to load the webpage specified by the link in the right column which is identified by the name main.

To view the resulting webpages, click on htmltutorial.html

You can also create columns and rows together using nested framesets, as illustrated in the following example

<!DOCTYPE html>
<html>
<head>
<title>Nested Frames</title>
</head>
<frameset cols="20%,*">
<frame name="menu" src="menu.html">
<frameset rows="30%,*">
<frame name="banner" src="http://htmltutor.org/wp/wp-content/uploads/2010/12/html_banner.jpg">
<frame name="main" src="http://htmltutor.org/">
<noframes>
This page uses frames, but unfortunately your browser does not support it.
Get Google Chrome Version 38.0.2125.104 m or IE10.
</noframes>
</frameset>
</frameset>
</html>

Save the above example as nestedframe.html and click nestedframe.html to view the output. In the above example, the first frameset creates two columns and the second frameset creates two rows in the second column. The noframes element is to inform the user that his or her browser does not support frameset and need to download a newer version of browsers. This is actually not necessary as all present browsers support frameset. Finally, you may want to add other frame's attributes like scrolling="no" to disable the scrollbar and noresize to disable image resizing,

❮ Previous Lesson Next Lesson ❯