Q5
Question 5
Create an HTML document (having multiple frames) showing horizontal and vertical frames having Internal and External links to different web pages. Apply CSS styles for formatting the webpages.
Tags that will be used:
<style>
<a>
<frame>
<frameset>
and other attributes to stylize.
Code
<html>
<head>
<style>
<link rel="stylesheet"href="frames.css">
</style>
<title>
html-5
</title>
</head>
<body>
<a href="frames_vertical.html">
<h2>Vertical Frames</h2>
</a>
<ol>
<li><a href="frame_1.html">Frame 1</a></li>
<li><a href="frame_2.html">Frame 2</a></li>
<li><a href="frame_3.html">Frame 3</a></li>
<li><a href="frame_4.html">Frame 4</a></li>
</ol>
<br>
<a href="frames_horizontal.html">
<h2>Horizontal Frames</h2>
</a>
<ol>
<li><a href="frame_1.html">Frame 1</a></li>
<li><a href="frame_2.html">Frame 2</a></li>
<li><a href="frame_3.html">Frame 3</a></li>
<li><a href="frame_4.html">Frame 4</a></li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
html-5-frames
</title>
</head>
<frameset id="frame" cols="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
html-5-frames
</title>
</head>
<frameset rows="25%,25%,25%,25%">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
<ol>
<li><a href="frame_1.html">Frame 1</a></li>
<li><a href="frame_2.html">Frame 2</a></li>
<li><a href="frame_3.html">Frame 3</a></li>
<li><a href="frame_4.html">Frame 4</a></li>
</ol>
<a href="html-5.html">
<h2>Home Page</h2>
</a><br>
<a href="frames_vertical.html">
<h2>Vertical Frames</h2>
</a><br>
<a href="frames_horizontal.html">
<h2>Horizontal Frames</h2>
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Frame 2</h1>
<p>Contents of Frame 2</p><br>
<ol>
<li><a href="frame_1.html">Frame 1</a></li>
<li><a href="frame_2.html">Frame 2</a></li>
<li><a href="frame_3.html">Frame 3</a></li>
<li><a href="frame_4.html">Frame 4</a></li>
</ol>
<a href="html-5.html">
<h2>Home Page</h2>
</a><br>
<a href="frames_vertical.html">
<h2>Vertical Frames</h2>
</a><br>
<a href="frames_horizontal.html">
<h2>Horizontal Frames</h2>
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Frame 3</h1>
<p>Contents of Frame 3</p>
<ol>
<li><a href="frame_1.html">Frame 1</a></li>
<li><a href="frame_2.html">Frame 2</a></li>
<li><a href="frame_3.html">Frame 3</a></li>
<li><a href="frame_4.html">Frame 4</a></li>
</ol>
<a href="html-5.html">
<h2>Home Page</h2>
</a><br>
<a href="frames_vertical.html">
<h2>Vertical Frames</h2>
</a><br>
<a href="frames_horizontal.html">
<h2>Horizontal Frames</h2>
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Frame 4</h1>
<p>Contents of Frame 4</p>
<ol>
<li><a href="frame_1.html">Frame 1</a></li>
<li><a href="frame_2.html">Frame 2</a></li>
<li><a href="frame_3.html">Frame 3</a></li>
<li><a href="frame_4.html">Frame 4</a></li>
</ol>
<a href="html-5.html">
<h2>Home Page</h2>
</a><br>
<a href="frames_vertical.html">
<h2>Vertical Frames</h2>
</a><br>
<a href="frames_horizontal.html">
<h2>Horizontal Frames</h2>
</a>
</body>
</html>
frameset {
position: absolute;
top: 10px;
bottom: 0px;
right: 10px;
width: 200px;
height: 200px;
background-color: black;
color: white;
}
Output






Try or Test The Corresponding Project Here
Last updated