Scribd
Upload
15 views15 pages

Web Assignment 4

The document outlines various HTML frameset structures for web assignments, including responsive multi-level nested frames, nested frames with syncing content, adaptive frames with adjustable widths, and frames with conditional content loading. Each section provides example HTML code for the frames and their respective content pages. The examples demonstrate different layouts and functionalities, such as dynamic content loading and scrollable areas.

Uploaded by

mahatoshruti04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views15 pages

Web Assignment 4

The document outlines various HTML frameset structures for web assignments, including responsive multi-level nested frames, nested frames with syncing content, adaptive frames with adjustable widths, and frames with conditional content loading. Each section provides example HTML code for the frames and their respective content pages. The examples demonstrate different layouts and functionalities, such as dynamic content loading and scrollable areas.

Uploaded by

mahatoshruti04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

WEB ASSIGNMENT 4

1. Responsive Multi-Level Nested Frameset with Dynamic Content


index.html

<!DOCTYPE html>
<html>
<head>
<title>Multi-Level Frameset</title>
</head>
<frameset rows="100px,40%,60%" frameborder="1" framespacing="0">
<frame src="header.html" name="header" noresize scrolling="no">
<frame src="row1.html" name="row1">
<frameset cols="25%,50%,25%">
<frame src="left.html" name="left">
<frame src="middle.html" name="middle">
<frame src="right.html" name="right">
</frameset>
</frameset>
</html>

header.html

<!DOCTYPE html>
<html>
<head><title>Header</title></head>
<body style="background-color: #4CAF50; color: white; text-align: center; font-size:
24px;">
<h1 style="text-align: center;">HEADER</h1>>
</body>
</html>

row1.html

<!DOCTYPE html>
<html>
<head><title>Header</title></head>
<body>
<div class="frame" style= text-align: "center;">
<img src="R.jpeg" alt="image"></div>
</body>
</html>

left.html

<!DOCTYPE html>
<html>
<head><title>Header</title></head>
<body>
<h3>Left Frame</h3>
</body>
</html>

middle.html

<!DOCTYPE html>
<html>
<head><title>Header</title></head>
<body>
<h3>Middle Frame</h3>
</body>
</html>
right.html

<!DOCTYPE html>
<html>
<head><title>Header</title></head>
<body>
<h3>Right Frame</h3>
</body>
</html>

OUTPUT:

2. Nested Frames with Syncing Content and Conditional Navigation

 index.html

<!DOCTYPE html>
<html>
<head>
<title>Nested Frames</title>
</head>
<frameset rows="100px,*">
<frame src="nav.html" name="nav" scrolling="no" noresize>
<frameset cols="30%,70%">
<frame src="sidebar.html" name="sidebar">
<frame src="main.html" name="main">
</frameset>
</frameset>
</html>

 nav.html

<!DOCTYPE html>
<html>
<head><title>Header</title></head>
<body>
<a href="sidebar1.html" target="sidebar">Page 1</a> |
<a href="sidebar2.html" target="sidebar">Page 2</a>
</body>
</html>

 sidebar1.html

<!DOCTYPE html>
<html>
<head><title>Sidebar 1</title></head>
<body style="background: #e1f5fe;">
<h4>Sidebar 1</h4>
<a href="content1a.html" target="main">Content A</a><br>
<a href="content1b.html" target="main">Content B</a>
</body>
</html>

 content1a.html

<!DOCTYPE html>
<html>
<head><title>Header</title></head>
<body>
<h1>Content A</h1>
<a href="sidebar2.html" target="sidebar">Switch Sidebar</a>
</body>
</html>

 content1b.html

<!DOCTYPE html>
<html>
<head><title>Content B</title></head>
<body>
<h2>Content B</h2>
<p>Another section from Sidebar 1. </p>
</body>
</html>

 sidebar2.html

<!DOCTYPE html>
<html>
<head><title>Sidebar 2</title></head>
<body style="background: #fff3e0;">
<h4>Sidebar 2</h4>
<a href="content2a.html" target="main">Content C</a><br>
<a href="content2b.html" target="main">Content D</a>
</body>
</html>

 content2a.html

<!DOCTYPE html>
<html>
<head><title>Content C</title></head>
<body>
<h2>Content C</h2>
<p>This is loaded from Sidebar 2. </p>
</body>
</html>

 content2b.html

<!DOCTYPE html>
<html>
<head><title>Content D</title></head>
<body>
<h2>Content D</h2>
<p>Another section from Sidebar 2. </p>
</body>
</html>

 sidebar.html

<!DOCTYPE html>
<html>
<head><title>Sidebar</title></head>
<body>
<h4>Select a category from the top menu. </h4>
</body>
</html>

 main.html

<!DOCTYPE html>
<html>
<head><title>Main Frame</title></head>
<body style="background: #f3e5f5;">
<h2>Welcome</h2>
<p>This is the main content area. Click a link in the sidebar to change
this content. </p>
</body>
</html>

OUTPUT:
3. Adaptive Frameset with Adjustable Column Widths and Dynamic Content

 index.html

<!DOCTYPE html>
<html>
<head>
<title>Adaptive Frameset</title>
</head>
<frameset cols="200px, *, *">
<frame src="left.html" name="left">
<frame src="middle.html" name="middle">
<frame src="right.html" name="right">
</frameset>
</html>

 left.html
<html>
<head><title>Left Frame</title></head>
<body style="background: #ffebee;">
<h3>Left Panel</h3>
<a href="update_middle.html" target="middle">Update Middle</a><br>
<a href="update_right.html" target="right">Update Right</a>
</body>
</html>

 right.html
<!DOCTYPE html>
<html>
<head><title>Right Frame</title></head>
<body style="background: #c8e6c9;">
<h3>Right Panel</h3>
<a href="update_left.html" target="left">Change Left</a>
</body>
</html>

 middle.html
<!DOCTYPE html>
<html>
<head><title>Middle Frame</title></head>
<body style="background: #fff9c4;">
<h3>Middle Panel</h3>
<p>This is the adjustable middle section. </p>
</body>
</html>

 update_left.html
<!DOCTYPE html>
<html>
<head><title>Updated Left</title></head>
<body>
<h3>Left Frame Updated! </h3>
<p>Triggered from the right frame. </p>
</body>
</html>

 update_middle.html
<!DOCTYPE html>
<html>
<head><title>Updated Middle</title></head>
<body>
<h3>Middle Frame Updated! </h3>
<p>Triggered from the left frame. </p>
</body>
</html>

 update_right.html
<!DOCTYPE html>
<html>
<head><title>Updated Right</title></head>
<body>
<h3>Right Frame Updated! </h3>
<p>Triggered from the left frame. </p>
</body>
</html>
OUTPUT:

4. Frame with Conditional Content Loading, No Resize, and Scrollable Areas


 index.html
<!DOCTYPE html>
<html>
<head><title>Fixed Header with Scrollable Content</title></head>
<frameset rows="100px,*" frameborder="no" framespacing="0">
<frame src="top-nav.html" name="top" noresize scrolling="no">
<frame src="main-content1.html" name="main" scrolling="yes">
</frameset>
</html>
 main-content1.html

<!DOCTYPE html>
<html>
<head>
<title>Main Content 1</title>
</head>
<body>
<h2>Section 1</h2>
<p>This is a long scrollable list for Section 1.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
<li>Item 41</li>
<li>Item 42</li>
<li>Item 43</li>
<li>Item 44</li>
<li>Item 45</li>
<li>Item 46</li>
<li>Item 47</li>
<li>Item 48</li>
<li>Item 49</li>
<li>Item 50</li>
</ul>
</body>
</html>

 main-content2.html
<!DOCTYPE html>
<html>
<head>
<title>Main Content 2</title>
</head>
<body>
<h2>Section 2</h2>
<p>This is a long scrollable list for Section 2.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
<li>Item 41</li>
<li>Item 42</li>
<li>Item 43</li>
<li>Item 44</li>
<li>Item 45</li>
<li>Item 46</li>
<li>Item 47</li>
<li>Item 48</li>
<li>Item 49</li>
<li>Item 50</li>
</ul>
</body>
</html>
 main-content3.html
<!DOCTYPE html>
<html>
<head>
<title>Main Content 3</title>
</head>
<body>
<h2>Section 3</h2>
<p>This is a long scrollable list for Section 3.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
<li>Item 41</li>
<li>Item 42</li>
<li>Item 43</li>
<li>Item 44</li>
<li>Item 45</li>
<li>Item 46</li>
<li>Item 47</li>
<li>Item 48</li>
<li>Item 49</li>
<li>Item 50</li>
</ul>
</body>
</html>

 top-nav.html
<!DOCTYPE html>
<html>
<head><title>Top Navigation</title></head>
<body style="background:#ccc; text-align:center;">
<h3>Navigation</h3>
<a href="main-content1.html" target="main">Section 1</a> |
<a href="main-content2.html" target="main">Section 2</a> |
<a href="main-content3.html" target="main">Section 3</a>
</body>
</html>

OUTPUT :
5. (optional) Frameset with Dynamic Content from External Sources and Syncing
 index.html

<!DOCTYPE html>
<html>
<head><title>External & Synced Frames</title></head>
<frameset rows="80px,*" frameborder="1">
<frame src="external-nav.html" name="nav" noresize>
<frameset cols="33%,33%,34%">
<frame src="local-info.html" name="frame1">
<frame src="local-news.html" name="frame2">
<frame src="placeholder.html" name="frame3">
</frameset>
</frameset>
</html>

 local-info.html

<!DOCTYPE html>
<html>
<head><title>Local Info</title></head>
<body>
<h2>Info Panel</h2>
<p>This shows synced content based on topic.</p>
</body>
</html>
 local-news.html

<!DOCTYPE html>
<html>
<head><title>Local News</title></head>
<body>
<h2>News Panel</h2>
<p>Recent updates appear here.</p>
</body>
</html>

 local-update1.html

<!DOCTYPE html>
<html>
<head><title>Local Update 1</title></head>
<body>
<h2>Updated Info</h2>
<p>This update is synced from the nav bar.</p>
</body>
</html>

 local-update2.html

<!DOCTYPE html>
<html>
<head><title>Local Update 2</title></head>
<body>
<h2>Updated News</h2>
<p>Live feed based on selection.</p>
</body>
</html>

 placeholder.html

<!DOCTYPE html>
<html>
<head><title>External</title></head>
<body>
<p>External content will load here when a link is clicked.</p>
</body>
</html>

 external-nav.html

<!DOCTYPE html>
<html>
<head><title>Navigation</title></head>
<body style="background:#a49ff0; color:white;">
<h3>Dynamic Navigation</h3>
<a href="https://example.com" target="frame3">Load External Site</a> |
<a href="local-update1.html" target="frame1">Local Update 1</a> |
<a href="local-update2.html" target="frame2">Local Update 2</a>
</body>
</html>

OUTPUT :
6. Advanced Anchor Tag Targeting with Contextual Updates Across Frames
 index.html

<!DOCTYPE html>
<html>
<head><title>Multi-Target Frames</title></head>
<frameset cols="20%,40%,40%">
<frame src="menu.html" name="menu">
<frame src="text.html" name="text">
<frame src="form.html" name="form">
</frameset>
</html>

 combo1.html
<!DOCTYPE html>
<html>
<head><title>Combo Page</title></head>
<body>
<h3>Combined Page</h3>
<p>This is the combo section.</p>
<a href="form1.html" target="form">Update Form Frame</a>
</body>
</html>

 form.html

<!DOCTYPE html>
<html>
<head><title>Form Frame</title></head>
<body style="background-color: rgb(239, 239, 133);">
<h3>Form Section</h3>
<form>
<label>Name: <input type="text" name="name"></label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

 form1.html

<!DOCTYPE html>
<html>
<head><title>Loaded Form 1</title></head>
<body style="background-color: rgb(229, 103, 202);">
<h3>Form Updated</h3>
<form>
<label>Email: <input type="email"></label><br>
<input type="submit">
</form>
</body>
</html>

 image.html

<!DOCTYPE html>
<html>
<head><title>Image</title></head>
<body style="text-align: center;">
<h1>Image Opened in New Tab</h1>
<img src="warrior 1.jpg" style="border: 10px solid brown; width: 190px; height:
auto">
</body>
</html>

 menu.html

<!DOCTYPE html>
<html>
<head><title>Menu</title></head>
<body style="background-color: rgb(240, 148, 148);">
<h4>Menu</h4>
<a href="text1.html" target="text">Load Text 1</a><br>
<a href="form1.html" target="form">Load Form 1</a><br>
<a href="image.html" target="_blank">Open Image (New Tab)</a><br>
<a href="combo1.html" target="text">Load Combo</a><br>
</body>
</html>

 text.html

<!DOCTYPE html>
<html>
<head><title>Text Area</title></head>
<body style="background-color: rgb(110, 110, 220);">
<h3>Text Content</h3>
<p>This is where descriptive content will appear.</p>
</body>
</html>

 text1.html

<!DOCTYPE html>
<html>
<head><title>Loaded Text 1</title></head>
<body style="background-color: rgb(194, 192, 192);">
<h3>Loaded Text 1</h3>
<p>This is text content loaded via link.</p>
</body>
</html>

OUTPUT :

You might also like