Create An HTML Page With Different Frames Such As Floating Frame Navigation Frame, Mixed Frame In HTML

Problem:- To create an HTML page with different types of frames such as floating frame, navigation frame & mixed frame. i).Create an HTML page named as “mixedframe.html”. Divide the page into two columns of 25% & 75% size. In 25% display the image and divide the 75% into two rows. (50% & 50%). In the first 50% display the video file and other 50% the timetable created ii).Create an HTML page named as “navigationframe.html”. Divide the page into two columns of 25%, 75% size. In 25% size call the hyperlink, and make the page to be get displayed on the other column when the link is clicked. iii).Create an HTML page named as “floatingframes.html”. in this file include a paragraph to explain floating frame, and in floating frame include any HTML file.

How to Solve:- to solve this problem we have to implement all frameset floating frame, navigation frame & mixed frame and first divide the page into two columns in the ratio of 25% and 75% or in 25% frameset display the image. Here Image has its separate source and separate file, after that further divide the 75% frame into two part both parts should be divide equal and first 50% part play a video in part and in another part create a table or we can merge the table if we have already that's it our work is completed There are two more conditions for both condition just implement according to requirement and see the explanation part.

Explanation:- First we have to know that What is the use of Frameset?. In many websites, if you ever notice that video section then you can understand the frameset easily just take an example suppose we want to post a youtube video on our website in small section than frame set always uses for creating a small and fixed space for playing a video. or we can cover or use website fixed area.

Frameset Syntax:-

<frameset rows="50%,50%">
statement......1
statement......2
statement......3
.
.
.
statement......n
</frameset>

Frameset can be nested here in place of statement we can use more frameset. take an another example and a graphical view of the frameset. If frameset has scrollbar than we can remove the scroll bar also.

<!DOCTYPE html>
<html>
<frameset rows="50%,50%">
<frame src="a.jpg">
<frameset cols="25%,75%">
<frame src="b.jpg">
<frame src="c.jpg">
</frameset>
</frameset>
</html>

Output:-

Tip:- Always create a folder for separate web page file for avoiding unnecessary mixing and irritating. Check the Output below of the program. If you are having any problem highly recommended following the given web page.

Recommendation:- Before going for this assignment follow the given assignment so you can understand all Tags very well.

1. Create an HTML page named as " SimpleTags.html ". with following tags details

2. Create A Student Registration Form Using Table In HTML

Note:- If you have a Better design than this page and you want to publish your post with all Credit Than you are welcome to read This.

Solution:-

Copy Start From Here

Mainpage.html

<html>
<body>
<a href="frames.html" target="two">navigation frame</a><br>
<a href="floatingframe.html" target="two">floating frame</a><br>
<a href="Noframe.html" target="two">no frame</a><br>
<a href="mixedframe.html" target="two">mixed frame</a><br>
</body>
</html>

Frame.html

<html>
<frameset cols="20%,35%,*" scrolling="no" noresize>
<frame name="one" src="MainPage.html"></frame>
<frame src="aa.gif"></frame>
<frame name="two" src="hulk.gif"></frame>
</frameset>
</html>

Floatingframe.html

<html>
<body>
<p> Explanation: There is a problem with the page you are trying to reach and it
cannot be displayed.
Try the following: * Refresh page: Search for the page again by clicking the Refresh
button. The timeout may have occurred due to Internet congestion.
* Check spelling: Check that you typed the Web page address correctly. The
address may have been mistyped.
* Access from a link: If there is a link to the page you are looking for, try accessing
the page from that link.
If you are still not able to view the requested page, try contacting you
<iframe src="bb.gif" height="225" width="500">
</iframe>
<iframe src="MainPage.html" height="50%" width="50%">
</iframe>
</body>
</html>

Mixedframe.html

<html>
<frameset cols="30%,*">
<frame src="pic.html"></frame>
<frameset rows="50%,*">
<frame src="video.html" autostart="true">
<frame src="Q3.html" >

</frameset>

</html>

navigationframe.html

</frame>
<frame name="two" ></frame>
<frameset rows="30%,*">
<frame src="hulk.gif">

</frame>
</frameset>

</html>

pic.html

<html>

</body>

</html>

video.html

<html>

</body>

</html>

Copy Ends Here

Output:-