Targeting named frames in HTML allows you to control which frame a hyperlink’s content will be loaded into. This technique is useful when you have a webpage divided into multiple frames and you want specific links to open in designated frames without affecting the rest of the page layout.
Setting Up Named Frames
To target named frames, you first need to define a frameset with multiple frames and assign a name attribute to each frame. Then, you can use the target attribute in links to specify which frame should display the linked content.
Example of Targeting Named Frames
Let’s create a simple example with a frameset that includes a navigation menu and a content area. Links in the navigation frame will load content into the content frame.
Step 1: Define the Frameset
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Targeting Named Frames Example</title>
</head>
<frameset cols=”25%, 75%”>
<frame src=”menu.html” name=”menuFrame”>
<frame src=”home.html” name=”contentFrame”>
<noframes>
<body>
<p>Your browser does not support frames. Please update your browser.</p>
</body>
</noframes>
</frameset>
</html>
In this example:
- The browser window is divided into two vertical frames using the cols attribute.
- The first frame (left) loads menu.html and is named menuFrame.
- The second frame (right) loads home.html and is named contentFrame.
Step 2: Create the Menu Frame (menu.html)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Menu</title>
</head>
<body>
<h2>Menu</h2>
<ul>
<li><a href=”home.html” target=”contentFrame”>Home</a></li>
<li><a href=”about.html” target=”contentFrame”>About</a></li>
<li><a href=”contact.html” target=”contentFrame”>Contact</a></li>
</ul>
</body>
</html>
In this example:
- The links in menu.html use the target attribute to specify that the linked content should open in the frame named contentFrame.
Step 3: Create the Content Pages
Home Page (home.html)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Home</title>
</head>
<body>
<h1>Welcome to the Home Page</h1>
<p>This is the home page content.</p>
</body>
<html>
About Page (about.html)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>About</title>
</head>
<body>
<h1>About Us</h1>
<p>This is the about page content.</p>
</body>
</html>
Contact Page (contact.html)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Contact</title>
</head>
<body>
<h1>Contact Us</h1>
<p>This is the contact page content.</p>
</body>
</html>
Explanation
- Frameset Definition:
- The <frameset> element divides the window into two columns.
- The cols=”25%, 75%” attribute sets the left frame to 25% of the window width and the right frame to 75%.
- Named Frames:
- Each <frame> element includes a name attribute (menuFrame and contentFrame), allowing them to be targeted by links.
- Targeting Links:
- In menu.html, the links use the target attribute to specify contentFrame as the frame where the linked content should be loaded.
- Clicking a link in the menu will load the corresponding page (home.html, about.html, or contact.html) into the contentFrame.
Special Targets
In addition to named frames, the target attribute can use special keywords:
- _self: Opens the link in the same frame or window (default behavior).
- _blank: Opens the link in a new window or tab.
- _parent: Opens the link in the parent frameset.
- _top: Opens the link in the full body of the window, removing all frames.
Example Using Special Targets
<ul>
<li><a href=”home.html” target=”_self”>Home (same frame)</a></li>
<li><a href=”about.html” target=”_blank”>About (new window)</a></li>
<li><a href=”contact.html” target=”_parent”>Contact (parent frameset)</a></li>
<li><a href=”index.html” target=”_top”>Index (full window)</a></li>
</ul>
Conclusion
Targeting named frames in HTML allows you to create sophisticated multi-frame layouts where links in one frame control the content displayed in another. Although the use of frames and framesets is now deprecated in favor of modern web design techniques using CSS and JavaScript, understanding this concept is valuable for maintaining legacy websites and appreciating the evolution of web development practices.