frame

Share this page :

What is HTML Div Tag?
The <div> tag is just like a container unit which is used to encapsulate other page elements and divides the HTML documents into sections. The div tag is generally used by web developers to group HTML elements together and apply CSS styles to many elements at once.

What is container tag?
The container tags are tags that have some content between their opening and closing tags.

Examples: <html>, <head>, and <body> tags.

What is empty tag?
The empty tags are also called void tags sometimes. They are self-closing tags like <img />, <br />, <input /> tags.

What is Frame?
A <frame> tag is used with <frameset> and it divides a webpage into multiple sections or frames, and each frame can contain different web pages.

What is Frameset tag?
The frames in HTML are created using the <frameset></frameset> tag pair. The <frameset> tag is a container tag for all other tags that are used to create frames. The <frameset> tag replaces the <body> tag in frameset documents.The <frameset> tag defines how to divide the window into frames.

Example 1:

File Name – row.html

<html>
<head>
<title>Row Frame</title>
</head>
<frameset rows=”50%,50%” border=”10″ bordercolor=”yellow”>

<frame src=”c:\images\1.jpg”>

<frame src=”c:\images\2.jpg”>

</frameset>
</html>

Example 2:

File Name – col.html

<html>
<head>
<title>Column Frame</title>
</head>

<frameset cols=”50%,50%”>

<frame src=”c:\images\1.jpg”>

<frame src=”c:\images\2.jpg”>

</frameset>
</html>

Example 3: Write an HTML program to display multiple web pages using frameset tags.

File Name – f1.html

<html>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>

File Name – f2.html

<html>
<body>
<h1>Frame 2</h1>
<p align=”center”><b>Contents of Frame 2</b></p>
</body>
</html>

File Name – f3.html

<html>
<head>
<title>Frame3</title>
</head>
<body bgcolor=”red” text=”white”>

<h1>Frame 3</h1>

<p align=”center”>

Contents of Frame 3

</p>

</body>
</html>

File Name – f4.html

<html>
<head>
<title>Frame</title>
</head>
<body bgcolor=”yellow”>

<h1>Frame 4</h1>

<p align=”center”>

Contents of Frame 4

<hr color=”black” width=”75%”>

<hr color=”blue” width=”55%”>

<hr color=”red” width=”37%”>

</p>

</body>
</html>

File Name – mix.html

<html>

<frameset cols=”*,*,*”>

<frameset rows=”*,*”>

<frame src=”f1.html”>

<frame src=”f2.html”>

</frameset>

<frame src=”f3.html”>

<frame src=”f4.html”>

</frameset>

</html>

Example 4:

Write an HTML program that contains two frames. There will be several images in the left frame, clicking on any one will show it in the right frame.

File Name – left.html

<html>
<head>
<title>Frame</title>
</title>

<body bgcolor=”crimson” text=”yellow”>

<center>

Click on any image<br>

<a href=”c:\images\1.jpg” target=”right”>

<img src=”c:\images\1.jpg” height=”90″ width=”90″>

</a>

<br>

<a href=”c:\images\2.jpg” target=”right”>

<img src=”c:\images\2.jpg” height=”75″ width=”75″>

</a>

<br>

<a href=”c:\images\3.jpg” target=”right”>

<img src=”c:\images\3.jpg” height=”55″ width=”55″>

</a>

<br>

<a href=”c:\images\4.jpg” target=”right”>

<img src=”4.jpg” height=”45″ width=”45″>

</a>

<br>

<a href=”c:\images\5.jpg” target=”right”>

<img src=”c:\images\5.jpg” height=”35″ width=”35″>

</a>

<br>

</center>
</body>
</html>

File Name – main.html

<html>
<frameset cols=”20%,80%” border=”10″>
<frame src=”left.html”>
<frame name=”right”>
</frameset>
</html>

Example 5:

Write an HTML program that contains three frames. For example the top frame will contain the name of “Computer Center”. The left frame will show the “course name” of that center. Clicking on the “course name” in the right frame will show the “subjects”.

File Name – ddeo.html

<html>
<body bgcolor=”red” text=”white”>

<h1>Chapters</h1>

<hr color=”blue” size=”5″>

<ol>
<li> Typing Master
<li> Banglaword
<li>Word
<li>Excel
</ol>

</body>
</html>

File Name – dfa.html

<html>

<body bgcolor=”blue”>

<h1>Chapters</h1>

<hr color=”red” size=”5″>

<font color=”white” size=”10″>

<ol>
<li> Tally
<li> Tax
<li> GST
<li> E-Filing
</ol>

</font>
</body>
</html>

File Name – dsa.html

<html>

<body bgcolor=green>

<h1>Chapters</h1>

<hr color=”red” size=”5″>

<font color=”white” size=”10″>

<ol>
<li> Javascript
<li>HTML
<li>Visual Basic
<li>C++ Language
</ol>

</font>
</body>
</html>

File Name – left.html

<html>

<body>

<u>Click on Course Name</u><br><br>

1. <a href=”ddeo.html” target=”right”>DDEO</a> <br>

2. <a href=”dsa.html” target=”right”>DSA</a> <br>

3. <a href=”dfa.html” target=”right”> DFA </a> <br>

</body>
</html>

File Name – head.html

<html>
<body>

<center>

<h2>Tarakeswar Webel Computer Centre</h2>

Kalyani Abasan, Chhaya Block, Tarakeswar, Hooghly,712410 <br>

<hr color=magenta size=8 width=65%>

</center>
</body>
</html>

File Name – main.html

<html>

<frameset rows=”23%,77%”>

<frame src=”head.html”>

<frameset cols=”20%,80%”>

<frame src=”left.html”>

<frame name=”right”>

</frameset>
</frameset>
</html>

Share this page :