HTML - Frames

  »   Basic HTML  »   HTML Tutorial - Using Frames in HTML

Frames are used to show more than one HTML document in one window. That means you will have a content-less, that will have the role of showing the browser what pages must be displayed. Since PHP and CSS have been introduced, this technique has been used less and less.

HTML - Frames, Credit's page

Generally, frames are used to display a menu in a part and the content in another part. When someone will click a link from the menu another page will open in the content part.

We will exemplify this using the following code:

html<html>
	<head></head>

	<frameset cols="30%,*">
		<frame src="menu.html">
		<frame src="content.html">
	</frameset>

</html>
  • frameset - the tag that establishes the characteristics of the frames, the individual frames will be defined within it.
  • frameset cols="#%, *" - "Cols" establishes the height that each frame will have. In the previous example we have established that the first frame (menu) will occupy 30% of the shown area, and we used the " * " sign to indicate the browser that the rest in the rest of the page will be shown the content.
  • frame src="" - the address of the files that will be displayed as menu and content.

HTML - Frame - Adding a banner or a title

Use the following code:

html<html>
	<head></head>
	
	<frameset rows="20%,*">
		<frame src="title.html">
		<frameset cols="30%,*">
			<frame src="menu.html">
			<frame src="content.html">
		</frameset>
	</frameset>
</html>

frameset rows="#%, *" - "rows" establishes the height of each frame that will be displayed. In the previous example, we have chosen that the first frame will be 20%, and the rest of the space that has remained will be divided between menu.html and content.html

HTML - Frame - Borders and Spaces

You must have noticed that between frames there are some gray lines that most of the time are not wanted. Erasing them is possible using the frameborder and framespacing tags. These attributes will be introduced under the frameset tag.

**Note: Frameset and frameborder is the same attribute. Some browsers do not recognize both of them, just one of them. That being said, our advice is to use both of them for more security.

  • frameborder"#" - The 0 value means there will be no border
  • border="#" - modifies the border's thickness (used by Netscape)
  • framespacing="#" - modifies the border's thickness (used by Internet Explorer)

Here's a practical example:

html<html>
	<head></head>

	<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
		<frame src="title.html">
		<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
			<frame src="menu.html">
			<frame src="content.html">
		</frameset>
	</frameset>
</html>

HTML - "Frame name" and "Frame target"

To maintain the menu in its actual position and that when we click on the contact page to open, for example, instead of the content page, we will name every frame and we will specify the place where it will open using the 'base target' tag.

Here is our code for the page:

html<html>
	<head>
		<base target="content">
	</head>

	<frameset rows="20%,*">
		<frame name="title" src="title.html">
		<frameset cols="30%,*">
			<frame name="menu" src="menu.html">
			<name="content" src="content.html">	
		</frameset>
	</frameset>
</html>

Noresize and scrolling

You can personalize the frame further more using the noresize and scrolling

html<html>
	<head></head>
	
	<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
		<frame src="title.html" noresize scrolling="no">
		<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
			<frame src="menu.html" scrolling="auto" noresize>
			<frame src="content.html" scrolling="yes" noresize>
		</frameset>
	</frameset>
</html>
  • no resize - does not let the frame to change its dimension based on the user's screen.
  • scrolling="(yes/no)" - allows, or does not allow, using the scroll in a frame.
HTML - Background
HTML - Layouts
Basic HTML
References
Miscellaneous
More CSS Tutorials