HTML - Frames Practical Practice
We will learn dividing the browser
window in different ways.
Step 1:
First Create these four web documents and save in a folder.
Step 2:
Now create the frame file which will contain the <frameset> and
<frame> tags and save it with the name frame.html. The frame file will
not contain the <body> tag instead <frameset> tag.
Example 1: Dividing the window
equally into two horizontal frames.
(for creating horizontal frames, we have
to use rows attribute in the
frameset tag and specify the value 50% for each frame)
Example 2: Dividing the window into three
horizontal frames with middle frame larger.
(for creating horizontal frames, we have
to use rows attribute in the
frameset tag and specify the value 50% for middle frame, 25% for top frame and
* symbol for the third frame (* stands for relative value))
Example 3: Dividing the window into three
equal vertical frames.
(for creating horizontal frames, we have
to use cols attribute in the
frameset tag and specify the value * relative value)
Example 4: Dividing the window into two
horizontal frames and then the bottom frame again into two vertical sections.
(for again dividing the frame we have to
use nested frameset tags)
First we will divide the window into two
frames. And then the bottom frame vertically into two sections.
Example 5: Dividing the window into four
frames
(for again dividing the frame we have to
use nested frameset tags)
First we will divide the window into two
frames. And then the first frame
vertically into two sections and same way bottom frame vertically into two
sections.
Linking Frames
In linking there is menu/links on the left side of browser and the content is displayed on the right side while clicking on links.
Example: Linking websites using Frames.
Here we will create two files
1) frameslink.html -
containing <frameset> tags, We will name the frames as “left” and
“right”.
2) link.html – containing links to websites, in <a> tag
use target attribute and specify the second frame’s name i.e. “right”
framelinks.html
link.html
Output:
No comments:
Post a Comment