Internet Technologies
main
main
  • Introduction
  • Contents
  • Practical List
  • HTML & CSS
    • Q1
    • Q2
    • Q3
    • Q4
    • Q5
  • JAVA Programs
    • Q6
    • Q7
    • Q8
    • Q9
    • Q10
    • Q11
    • Q12
  • JAVASCRIPT
    • Q13
    • Q14
    • Q15
  • JDBC
    • Q16
    • Q17
  • JSP
    • Side Note
    • Q18
    • Q19
    • Q20
    • Q21
    • Q22
    • Q23
  • End
Powered by GitBook
On this page
  • 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.
  • Code
  • Output
  1. HTML & CSS

Q5

Question 5

PreviousQ4NextQ6

Last updated 4 years ago

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

Browse Source Code
Image output for html-5.html
Image output for frames_vertical.html
Image output for frames_horizontal.html
Image output for frames_vertical.html (frames order interchanged)
Image output for frames_horizontal.html (frames order interchanged)
Image output for full frames project
html-5CodePen
Live Demo of html-5.html (full frames project files)
Logo