How to Create Navigation Using HTML Frameset

Normally we use table to create navigation menu for Web Site but the problem with using tables is that we have to place the table with navigation on every Web page. The other way to create navigation links using frameset. The logic is very simple create all the Web pages of Web Site after that crate a navigation page which link all the Web pages. My Web site consist of two Web Page names as frame1.htm and frame2.htm respectively. Now, the next thing I have to do to link these page with the navigation menu for doing that I have made the Web Page with the name framelinks.htm which linking to frame1.htm and frame2.htm Web Pages. The final step is to create a Web Page with the frameset and assign pages for that I have made menulinkframe.htm.

 

HTML Code for Frame1.htm Web Page

   1:  <html>
   2:  <head>
   3:  <title>
   4:  Frame 1
   5:  </title>
   6:  </head>
   7:  <body>
   8:  Frame 1
   9:  </body>
  10:  </html>

HTML Code for Frame2.htm Web Page

   1:  <html>
   2:  <head>
   3:  <title>
   4:  Frame 1
   5:  </title>
   6:  </head>
   7:  <body>
   8:  Frame 2
   9:  </body>
  10:  </html>

HTML Code for Framelinks.htm contains the navigation links of Frame1.htm and Frame2.htm

   1:  <html>
   2:  <head>
   3:  <title>
   4:  Menu
   5:  </title>
   6:  </head>
   7:  <body>
   8:  <a href="frame1.htm" target="mainframe"> Frame 1</a><br>
   9:  <a href="frame2.htm" target="mainframe"> Frame 2</a>
  10:  </body>
  11:  </html> 

HTML code for menulinkframe.htm calling all the frames which include Frame.htm, Frame2.htm and Menulinkframe.htm

   1:  <html>
   2:  <frameset cols="20%,*">
   3:  <frame src="framelinks.htm">
   4:  <frame src="frame1.htm" name="mainframe">
   5:  </frameset>
   6:  </html>

 

image

If you click on frame2.htm link it will be loaded in the right side frame as show below.

image

The frame name attribute value is used as identifier of the frame and anchor target attribute value tells the browser to open the page in the specific frame.

Tags: , ,

Author: Revo

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *

3 + 10 =

 

Pin It on Pinterest

Shares
Share This