Q5

Question 5

PreviousQ4 NextQ6

Last updated 4 years ago

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 Code Here

PreviousQ4 NextQ6

Last updated 4 years ago