Frame based Content Menu

Frames are usually used to place content navigation in one frame and load the pages with the content into adjacent frame so that when user clicks in the navigational frame, appropriate web page is loaded in the content frame. It requires the web page to be divided vertically in two frames as shown

VS-1027 Certified HTML Designer_Reading_Material_html_292c9c8c

  This is accomplished by having each <frame> tag assign a value in their name attribute to give each frame a name which is used in the links to indicate which frame the new page should load into. As in the example, help.htm web page is made as   <frameset cols=”250, *”>
<frame src=”menu.htm” name=”menu” />
<frame src=”content.htm” name=”main” />
</frameset>   The web page has two columns or frames, first frame takes 250 pixels space and will have the navigation bar. The second frame will have the content part of the web page. The links in the left side navigation bar will load pages into the right side main page.   The links in the menu.htm file are given as   <a href=” http://www.vskills.in/certification/Fees-for-certifications” target=”main”>Fees</a>
<br /><br />
<a href=” http://www.vskills.in/certification/certifications” target=”main”>Certifications </a>
<br /><br />
<a href=” http://www.vskills.in/certification/page/center-list-details” target=”main”> Center List </a>   The out put is shown as  

VS-1027 Certified HTML Designer_Reading_Material_html_m23c79056

      The target attribute can have following attribute values as  

  • _self – It loads the web page in the current frame.
  • _blank-It loads the web page in a new browser window and opening it.
  • _parent- It loads the page in the parent window, or the main browser window.
  • _top- It loads the web page in the browser window, replacing any current frames.

Apply for HTML Certification

https://www.vskills.in/certification/certified-html-designer

Back to Tutorials

Share this post
[social_warfare]
frame Attributes
Nesting Framesets

Get industry recognized certification – Contact us

keyboard_arrow_up