HTML Code to develop a web page having two frames that divide the page into two equal rows and divides the first row into equal columns. Fill each with the different background color

by

To create a webpage with two frames that divide the page into two equal rows, and then divide the first row into two equal columns, each with a different background color, you can use the HTML frameset tag.

However, it’s important to note that the <frameset> tag is not supported in HTML5 and is considered outdated. Modern web design typically uses CSS and HTML for layout instead of frames due to accessibility and usability concerns.

But for educational purposes, here’s how you could do it with frames:

<!DOCTYPE html>
<html>
<head>
    <title>Frames Example</title>
</head>
<frameset rows="50%,50%">
    <frameset cols="50%,50%">
        <frame src="frame1.html" name="frame1">
        <frame src="frame2.html" name="frame2">
    </frameset>
    <frame src="frame3.html" name="frame3">
</frameset>
</html>

This HTML document uses <frameset> tags to divide the page. The first <frameset> tag splits the page into two rows equally. Inside the first row, another <frameset> tag splits it into two columns. Each <frame> tag references a different HTML file (frame1.html, frame2.html, frame3.html).

To set different background colors for each frame, you would include the style directly within the referenced HTML files. Here’s what each of those files might look like:

frame1.html

<!DOCTYPE html>
<html>
<head>
    <title>Frame 1</title>
</head>
<body style="background-color: red;">
    <p>This is frame 1.</p>
</body>
</html>

frame2.html

<!DOCTYPE html>
<html>
<head>
    <title>Frame 2</title>
</head>
<body style="background-color: blue;">
    <p>This is frame 2.</p>
</body>
</html>

frame3.html

<!DOCTYPE html>
<html>
<head>
    <title>Frame 3</title>
</head>
<body style="background-color: green;">
    <p>This is frame 3.</p>
</body>
</html>

Each frame file (frame1.html, frame2.html, frame3.html) sets a different background color for its body, demonstrating how each section can have a unique appearance. Remember, for new projects, consider using CSS Flexbox, Grid, or other modern layout techniques instead of frames for better results and compatibility.