How to use HTML <frame> tag with Images

The HTML <frame> tag defines a frame or a section in a web page, within the <frameset> tag. Every single <frame> can has its own attributes like scrolling, borders etc. You can show different pages separately in different frames. Similarly, you can show multiple images inside multiple <frame> tags within a single <frameset>.

Note: HTML5 does not support the <frame> and <frameset> tag.

Not a very popular element to use these days, you can still use the <frame> tag in your web page to show separately multiple images of different size.

For example, I have two images with different size (width and height) and I want to show the images using the <frame> tag. This is how I’ll do it.

Image in two separate frames

<html>
<head> 
    <title>Show Images inside Frame tag</title>
</head>

<frameset cols="20%,50%"> 
    <frame src="../../images/theme/javascript.png" > 
    <frame src="../../images/hawa-mahal.jpg" scrolling="yes" noresize
</frameset>

</html>
Try it

I have first defined the <frameset> tag and used the cols attribute to specify the number and size of columns. Since the first image is smaller, I have set 20% (pixel) and 50% for the second.

Note: Don’t use the <frameset> tag inside the <body> tag.

In the second <frame> tag, I have defined the scrolling attribute, with value yes. The frame will show the scroll bars, since the image is big.

Here’s a list of other attributes that you can use with <frame> tag.

src: This is a required attribute. The value is the the Url of the image (or a web page, an object et.) that you want to show in the frame.

frameborder: Add or remove borders in the frames. The value for this attribute can be 0 or 1. It can also be yes (for 1) or no (for 0). Set the value as 1 (or yes) if you want to show the border on the frames. For example,

<frame src="../../images/theme/javascript.png" frameborder="1">

scrolling: You can use yes, no or auto values to show the scrollbars in a frame.

name: Specify a name to the frame. For example,

<frame src="../../images/theme/javascript.png" name="frm_first">

noresize: Specify this attribute, if you want to restrict the <frame> from resizing. By default you can resize the frame. However, you can prevent the frame from resizing like this.

<frame src="../../images/hawa-mahal.jpg" noresize="noresize">

Note: The <frame> tag is different from the <iframe> tag. HTML5 supports <iframe>, but not the <frame> tag.

Well, that’s it. Thanks for reading.

Previous - What is a Web Application?



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!