Home/ Questions/Q 58661
Next
In Process
Himanshu Kulshreshtha
Elite Author
Asked: 2024-05-22T15:05:28+05:30 In:

Design a web page which uses two frames, the left frame are further divided into two frames horizontally. The upper portion of left frame contains an image while the lower one has navigation titles. The right frame contains some text description of the titles on the navigation bar.

Create a web page with two frames, with the left frame being further divided into two horizontal frames. The left frame displays navigation titles at the bottom and a picture at the top. A brief description of the navigation bar’s titles can be found in the right frame.

CIT-003
Share

    1 Answer

    1. Elite Author

      Creating a web page with frames involves HTML and potentially some CSS for styling. Here's a basic example of how you could structure your HTML:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame-based Web Page</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        #container {
            display: flex;
            height: 100vh;
        }
        #left-frame {
            width: 30%;
            border-right: 1px solid #ccc;
            display: flex;
            flex-direction: column;
        }
        #upper-left {
            height: 50%;
        }
        #lower-left {
            height: 50%;
            overflow-y: auto;
        }
        #right-frame {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        #navigation {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        #navigation li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="left-frame">
            <div id="upper-left">
                <!-- Image -->
                <img src="your-image.jpg" alt="Image">
            </div>
            <div id="lower-left">
                <!-- Navigation Titles -->
                <ul id="navigation">
                    <li><a href="#title1">Title 1</a></li>
                    <li><a href="#title2">Title 2</a></li>
                    <li><a href="#title3">Title 3</a></li>
                    <!-- Add more navigation titles as needed -->
                </ul>
            </div>
        </div>
        <div id="right-frame">
            <!-- Text Description -->
            <div id="title1">
                <h2>Title 1</h2>
                <p>Description of title 1 goes here.</p>
            </div>
            <div id="title2">
                <h2>Title 2</h2>
                <p>Description of title 2 goes here.</p>
            </div>
            <div id="title3">
                <h2>Title 3</h2>
                <p>Description of title 3 goes here.</p>
            </div>
            <!-- Add more text descriptions as needed -->
        </div>
    </div>
</body>
</html>

      This HTML code creates a basic layout with two frames: a left frame and a right frame. The left frame is divided into two sections horizontally: the upper section contains an image, and the lower section contains navigation titles. The right frame contains text descriptions corresponding to the navigation titles.

      You can further customize this layout by adjusting the CSS styles to meet your design requirements. Additionally, you'll need to replace "your-image.jpg" with the actual path to your image file.

      • 0

    Related Questions