Saturday, 2 April 2016

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:-

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

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>
</frameset>
</html>

navigationframe.html

<html>
<frameset cols="25%,*" scrolling="no" noresize>
<frame name="one" src="MainPage.html">
</frame>
<frame name="two" ></frame>
<frameset rows="30%,*">
<frame src="hulk.gif">
</frame>
</frameset>
</html>

pic.html

<html>
<body>
<img src="ghanendra.jpg" height="650" width="400">
</body>
</html>

video.html

<html>
<body bgcolor="aqua">
<embed src="aa.mp4" width="600" height="300" autostart="true">
</embed>
</body>


Extreme Recommended:- Like our Facebook Page or Join our Facebook Group and Google plus Community for up-to-date. If you have any Query or Question you can ask in the group, I will Try To Solve your Query and try to answers of your Questions withing 24 Hours, You can also Email me or comment below Please suggest to your Friends to join and like our page and don't forget to Subscribe. Enter your Email and click to subscribe.

Ghanendra Yadav

Ghanendra Yadav

Hello, I Am Ghanendra Yadav Owner of This Blog, I am professional Blogger and Programmer. I Love Programming, Logo Making, And Banner Designing. My Highest Qualification is MCA From NIT Warangal. You Can Find Me On Social Media Through Below Link And If You Have Any Query Related To Programming And Other Subject Comment Below or You Can Mail Me I Will Try To Answer Within 24 Hours Email:- yghanendra@student.nitw.ac.in

Find me on Social Media

Facebook | Twitter | Google+ | RSS Feed

5 comments:

  1. Please upload a student registration for using tabletable

    ReplyDelete
  2. Nice blog about programming keep it up
    Explore world Knowledge in just 10 point
    visit Click Here

    ReplyDelete
    Replies
    1. Thanks You If You Are interesting in web design plzClick Here

      Delete