Header Ads

Create a web page using frame. Divide the page into two parts with Navigation links on left hand side of page (width=20%) and content page on right hand side of page (width = 80%). On clicking the navigation Links corresponding content must be shown on the right hand side.

Abhay Kumar September 06, 2022
HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

 

HTML CODE  :

frame.html

this creates the frameset

<html>
<frameset cols="20%,80%" frameborder="yes" border="3" bordercolor="cyan">
    <frame src="links.html" name="link">
        <frame src="main.html" name="main">
</frameset>

</html>


links.html 

this connects all the links to the frameset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="#F4DF4EFF">
    <font size="6">
        <a href="link1.html" target="main">Link 1</a><br><br>
        <a href="link2.html" target="main">Link 2</a><br><br>
        <a href="link3.html" target="main">Link 3</a><br><br>
        <a href="link4.html" target="main">Link 4</a><br><br>
</body>
</html>


link1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="#949398FF">
    <center><h2>Link 1</h2></center>
    <font size="5">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, saepe sequi enim culpa a
    deleniti aliquid perferendis! Facere nemo ratione praesentium fugit iure sapiente minus placeat
    dolor esse harum, recusandae reprehenderit incidunt mollitia dolore? Aliquam, minima quos
    mollitia fuga itaque quae nihil culpa debitis inventore minus suscipit nemo doloribus est.
</body>
</html>


link2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="#949398FF">
    <center><h2>Link 2</h2></center>
    <font size="5">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime, earum quibusdam
    voluptatibus consequuntur voluptate illum doloribus atque facere cumque necessitatibus
    qui porro molestiae error eveniet unde quisquam fugit iusto suscipit?
</body>
</html>


link3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="#949398FF">
    <center><h2>Link 3</h2></center>
    <font size="5">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
    accusamus unde porro nulla dicta veritatis magnam veniam, iste tempora
    laboriosam quaerat harum, fugiat fugit? Tempora voluptatibus perspiciatis
    quo beatae unde!
</body>
</html>


link4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="#949398FF">
    <center><h2>Link 4</h2></center>
    <font size="5">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur
    nihil culpa autem officiis harum. Sunt tenetur laudantium quibusdam
    consequatur necessitatibus iste error officia odio. Libero illo nulla
    ipsa magni eaque commodi quam nam beatae expedita fuga suscipit, voluptate
    modi recusandae doloribus sed est, illum incidunt neque maxime ipsam. Quos
    aspernatur alias ullam dolore a dolores quia! Porro nemo dicta aliquam error
    praesentium explicabo nam fugit mollitia atque voluptatum odio illum fuga
    repellendus provident recusandae impedit suscipit, necessitatibus exercitationem?
    Animi molestiae ab eius nisi rerum deserunt quaerat ratione iusto quisquam doloremque
    totam, velit vel rem cupiditate excepturi nemo minus debitis voluptatum.
</body>
</html>


main.html

this is the main page
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="#949398FF">
    <center><h1>WELCOME TO THE MAIN PAGE</h1></center>
</body>
</html>


OUTPUT :





Tags:

Post a Comment

0 Comments

Ask Your Queries in the comments