AD Lab Assignment- 02
Ques: Implement both the types of lists (ordered and unordered), show the
usage of anchor tags and make a table using rowspan and colspan attributes.
Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><marquee>All about what has to be done in the AD lab</marquee></h1>
<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<hr>
<h2>Steps to Bake a Cake</h2>
<ol>
<li>Gather ingredients</li>
<li>Mix ingredients</li>
<li>Bake in the oven</li>
<li>Let it cool</li>
</ol>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, nobis.<a
href="[Link] Wikipedia about lorem ipsum in html.</a>
</p>
<p>To open a link in a new page :<a href="[Link] target="_blank">Open Google in a
New Tab</a> </p>
<p>To download a file using anchor tag : <a href="[Link]" download>Download the PDF</a></p>
<p>Linking to an email address using Anchor tag : <A HREF=MAILTO:22051011@[Link]> Mail of a
student </A></p>
<hr>
<p>Tables are useful while presenting Grouped information.(the example given is ):
<div>
<table border="1" >
<tr>
<th> </th>
<th>8:05-9:00</th>
<th>9:00-9:55</th>
<th>9:55-10:50</th>
<th>11:00-12:00</th>
<th>12:05-1:00</th>
<th>1:00-1:55</th>
<th>1:55-2:50</th>
<th>3:10-4:00</th>
<th>4:00-4:55</th>
<th>4:55-5:50</th>
</tr>
<tr>
<td><strong>Mon</strong> </td>
<td colspan="4" align="center">placement preparation
classes<strong>(G3)</strong><br>LT-1</td>
<td>ICS-624</td>
<td>Lunch</td>
<td>Tcs-693<br>LT-7</td>
<td>ICS-671<br>LT-7</td>
<td colspan="2" align="center">compiler design lab<br><strong>Aryabhatt First Floor
Lab</strong></td>
</tr>
<tr>
<td><strong>Tue</strong></td>
<td>TCS-604<br>CR-7</td>
<td>TCS-604<br>CR-7</td>
<td>TCS-611 (online)</td>
<td>TCS-611 (online)</td>
<td>TCS-624<br>TCS-622</td>
<td>LUNCH</td>
<td>TCS-601<br>LT-7</td>
<td>TCS-624<br>LT-7</td>
<td colspan="2" align="center">Web Development Lab<br><strong>LAB-2</strong></td>
</tr>
<tr>
<td><strong>Wed</strong></td>
<td>TCS-604<br>CR-7</td>
<td>TCS-604<br>CR-7</td>
<td>TCS-611 (online)</td>
<td>TCS-611 (online)</td>
<td>TCS-624<br>TCS-622</td>
<td>LUNCH</td>
<td>TCS-611<strong>(discussion class)</strong><br>LT-7</td>
<td>TCS-624<br>LT-7</td>
<td align="center" colspan="2">software engineering lab<br><strong>Aryabhatt First Floor
Lab</strong></td>
</tr>
<tr>
<td><strong>Thu</strong></td>
<td colspan="4" align="center">placement preparation
classes<strong>(G3)</strong><br>LT-1</td>
<td>TCS-624<br>TCS-622</td>
<td>LUNCH</td>
<td>XCS-601(verbali)<br><strong>LT-06</strong></td>
<td>TCS-671<br><strong>Lt-7</strong></td>
<td>TCS-604<br><strong>Lt-6</strong></td>
<td>TCS-693<br><strong>Lt-6</strong></td>
</tr>
<tr>
<td><strong>fri</strong></td>
<td colspan="2" align="center">Software engineering lab<br><strong>New Lab-2</strong></td>
<td colspan="2" align="center">Competitive programminng (TOC-601)-audit
course<br><strong>(online)</strong></td>
<td>XCS-601(QAR)<br><strong>CR-6</strong></td>
<td>LUNCH</td>
<td>TCS-601<br><strong>LT-6</strong></td>
<td>TCS-604<br><strong>LT-6</strong></td>
<td colspan="2" align="center">compiler design lab<br><strong>Digital lab-2<br>(main library
block)</strong></td>
</tr>
</table>
<br>
<br>
</div>
<b> This usefulness is utilized to the maximum on Web pages. Tables are used to arrange the layout of
web pages too.</b></p>
</body>
</html>
Output:-
Ques-1(a): 5.3 table code:
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Merged Cells Table</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: auto;
text-align: center;
}
th, td {
border: 1px solid black;
padding: 8px;
}
caption {
font-style: italic;
margin-bottom: 10px;
}
</style>
</head>
<body>
<table>
<caption>A test table with merged cells</caption>
<tr>
<th rowspan="2"></th>
<th colspan="2">Average</th>
<th rowspan="2">Red eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
<tr>
<th>Males</th>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<th>Females</th>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</table>
</body>
</html>
Output:-
Ques-1(b): 5.4 table code:
Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swimming Schedule</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 15px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
td {
color: white;
font-weight: bold;
}
.public-swim {
background-color: #00bcd4;
}
.aquacise, .aqua-jog {
background-color: #e91e63;
}
.education {
background-color: #00bcd4;
}
.lane-swim {
background-color: #8bc34a;
}
.parent-baby {
background-color: #ff4081;
}
.kids-swimming {
background-color: #ff9800;
}
</style>
</head>
<body>
<h1>Swimming Schedule</h1>
<table>
<thead>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td class="public-swim">Public Swim<br>06:30 - 10:30</td>
<td class="public-swim">Public Swim<br>06:30 - 09:00</td>
<td class="public-swim">Public Swim<br>06:30 - 09:00</td>
<td class="public-swim">Public Swim<br>06:30 - 11:15</td>
<td class="public-swim">Public Swim<br>06:30 - 09:00</td>
<td class="lane-swim">Lane Swim<br>08:00 - 09:00</td>
<td class="lane-swim">Lane Swim<br>08:00 - 09:00</td>
</tr>
<tr>
<td class="aquacise">Aquacise<br>10:30 - 11:15</td>
<td class="aqua-jog">Aqua Jog<br>09:15 - 10:00</td>
<td class="education">Education Swimming Lessons<br>09:00 - 12:00</td>
<td class="aquacise">Aquacise<br>11:15 - 12:00</td>
<td class="education">Education Swimming Lessons<br>09:00 - 12:00</td>
<td class="kids-swimming">Oldham Active Kids Swimming Lessons<br>09:00 - 13:00</td>
<td class="public-swim">Public Swim<br>09:00 - 11:00</td>
</tr>
<tr>
<td class="lane-swim">Lane Swim<br>11:30 - 13:00</td>
<td class="parent-baby">Parent & Baby Class<br>09:30 - 10:15</td>
<td class="lane-swim">Lane Swim<br>12:00 - 13:00</td>
<td class="lane-swim">Lane Swim<br>12:00 - 13:00</td>
<td class="lane-swim">Lane Swim<br>12:00 - 13:00</td>
<td class="parent-baby">Parent & Baby<br>12:00 - 12:45</td>
<td class="aquacise">Aquacise<br>11:00 - 11:45</td>
</tr>
<tr>
<td class="education">Education Swimming Lessons<br>13:00 - 16:00</td>
<td class="public-swim">Public Swim<br>10:00 - 11:45</td>
<td class="public-swim">Public Swim<br>10:00 - 11:45</td>
<td class="education">Education Swimming Lessons<br>13:00 - 17:00</td>
<td class="kids-swimming">Oldham Active Kids Swimming Lessons<br>13:00 - 17:00</td>
<td class="public-swim">Public Swim<br>13:00 - 17:00</td>
<td class="public-swim">Public Swim<br>13:00 - 17:00</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:-
Ques-1(c): 5.6 table code:
Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" bordercolor="green">
<tr>
<th align="center" rowspan="1">Subject Code</th>
<th align="center" colspan="2">Subject Name
<table border="2" bordercolor="blue">
<tr>
<td align="center">Compiler Design</td>
<td align="center">[Link] Pai H</td>
</tr>
<tr>
<td align="center"><u>TCS-611</u></td>
<td align="center">software engineering</td>
</tr>
</table>
</th>
</tr>
<tr>
<td >TCS-604</td>
<td >Computer Netwroks-I</td>
</tr>
</table>
</body>
</html>
Output:-
Ques-1(d): 5.7 table code:
Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.blue{
height: 500px;
width: 500px;
border: 20px solid rgb(5, 5, 59);
display: flex;
justify-content: center;
align-items: center;
}
.light-blue{
height: 470px;
width: 470px;
border: 2px solid rgb(154, 154, 224);
display: flex;
justify-content: center;
align-items: center;
.red{
height: 200px;
width: 200px;
border: 40px solid rgb(199, 85, 85);
display: flex;
justify-content: center;
align-items: center;
}
.light-red{
height: 190px;
width: 190px;
border: 3px solid rgb(199, 85, 85);
display: flex;
justify-content: center;
align-items: center;
}
.yellow{
height: 150px;
width: 210px;
border: 20px solid yellow;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
.white{
height: 100px;
border: 4px solid white;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.green{
height: 90px;
width: 90px;
background-color: rgb(78, 215, 78);
display: flex;
justify-content: center;
align-items: center;
}
.white-in{
height:20px;
width: 20px;
border: 6px solid white;
display: flex;
justify-content: center;
align-items: center;
}
.in{
height: 7px;
width: 7px;
background-color: white;
}
</style>
<body>
<div class="blue ">
<div class="light-blue">
<div class="red">
<div class="light-red">
<div class="yellow">
<div class="white">
<div class="green">
<div class="white-in">
<div class="in"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:-
Ques-1(e): 5.8 table code:
Answer:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table {
border-top: 3px solid black;
border-left: 3px solid black;
margin: 0;
padding: 0;
border-spacing: 0;
text-align: center;
}
table td {
border-right: 3px solid black;
border-bottom: 3px solid black;
margin: 0;
padding: 0;
width: 50px;
}
table tr {
height: 22px;
}
.first-row {
background-color: red;
}
.second-row {
background-color: orange;
}
.third-row {
background-color: yellow;
}
.forth-row {
background-color: green;
}
.fifth-row {
background-color: cornflowerblue;
}
.sixth-row {
background-color: blue;
}
.seventh-row {
background-color: purple;
}
</style>
</head>
<body>
<table>
<!-- 1 row -->
<tr class="first-row">
<td rowspan="3">1</td>
<td rowspan="2"> </td>
<td colspan="2"> </td>
<!-- <td></td> -->
<td rowspan="3"> </td>
<td colspan="2"> </td>
<!-- <td></td> -->
</tr>
<!-- 2 row -->
<tr class="second-row">
<!-- <td></td> -->
<!-- <td></td> -->
<td>2</td>
<td> </td>
<!-- <td></td> -->
<td> </td>
<td> </td>
</tr>
<!-- 3 row -->
<tr class="third-row">
<!-- <td></td> -->
<td colspan="2">3</td>
<!-- <td></td> -->
<td> </td>
<!-- <td></td> -->
<td> </td>
<td rowspan="3"> </td>
</tr>
<!-- 4 row -->
<tr class="forth-row">
<td>4</td>
<td colspan="2"> </td>
<!-- <td></td> -->
<td colspan="3"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<!-- 5 row -->
<tr class="fifth-row">
<td>5</td>
<td colspan="2"> </td>
<!-- <td></td> -->
<td rowspan="2"> </td>
<td colspan="2"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<!-- 6 row -->
<tr class="sixth-row">
<td>6</td>
<td colspan="2"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
<td colspan="3"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<!-- 7 row -->
<tr class="seventh-row">
<td rowspan="4">7</td>
<td rowspan="2" colspan="2"> </td>
<!-- <td></td> -->
<td> </td>
<td colspan="3"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<!-- 8 row -->
<tr class="first-row">
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td rowspan="3">8</td>
<td rowspan="3" colspan="3"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<!-- 9 row -->
<tr class="second-row">
<!-- <td></td> -->
<td>9</td>
<td></td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<!-- 10 row -->
<tr class="third-row">
<!-- <td></td> -->
<td>10</td>
<td></td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<!-- 11 row -->
<tr class="forth-row">
<td>11</td>
<td colspan="4"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td></td>
<td rowspan="2"> </td>
</tr>
<!-- 12 row -->
<tr class="fifth-row">
<td colspan="3">12</td>
<!-- <td></td> -->
<!-- <td></td> -->
<td> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<!-- <td></td> -->
</tr>
<!-- 13 row -->
<tr class="sixth-row">
<td colspan="3" rowspan="5">13</td>
<!-- <td></td> -->
<!-- <td></td> -->
<td> </td>
<!-- <td></td> -->
<!-- <td></td> -->
<td> </td>
</tr>
<!-- 14 row -->
<tr class="seventh-row">
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td>14</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- 15 row -->
<tr class="first-row">
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td>15</td>
<td> </td>
<td colspan="2" rowspan="2"> </td>
<!-- <td></td> -->
</tr>
<!-- 16 row -->
<tr class="second-row">
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td rowspan="3">16</td>
<td rowspan="3"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<!-- 17 row -->
<tr class="second-row">
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td colspan="2"> </td>
<!-- <td></td> -->
</tr>
<!-- 18 row -->
<tr class="third-row">
<td>17</td>
<td colspan="2"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<!-- 19 row -->
<tr class="forth-row">
<td>18</td>
<td colspan="6"> </td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
</table>
</body>
</html>
Ouput:-
Ques-1(f): 5.9 table code:
Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10-Level Pyramid of Blocks</title>
<style>
table {
width: 100%;
border-collapse: collapse;
height: 100%;
}
td {
width: 300px;
height: 30px;
background-color: gray;
text-align: center;
}
.empty {
background-color: white;
}
.ct{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<!-- Row 1 (level 10) -->
<tr>
<td class="empty" colspan="9"></td>
<td></td>
<td class="empty" colspan="9"></td>
</tr>
<!-- Row 2 (level 9) -->
<tr>
<td class="empty" colspan="8"></td>
<td class= "ct" colspan="3"></td>
<td class="empty" colspan="8"></td>
</tr>
<!-- Row 3 (level 8) -->
<tr>
<td class="empty" colspan="7"></td>
<td class= "ct" colspan="5"></td>
<td class="empty" colspan="7"></td>
</tr>
<!-- Row 4 (level 7) -->
<tr>
<td class="empty" colspan="6"></td>
<td class= "ct" colspan="7"></td>
<td class="empty" colspan="6"></td>
</tr>
<!-- Row 5 (level 6) -->
<tr>
<td class="empty" colspan="5"></td>
<td class= "ct" colspan="9"></td>
<td class="empty" colspan="5"></td>
</tr>
<!-- Row 6 (level 5) -->
<tr>
<td class="empty" colspan="4"></td>
<td class= "ct" colspan="11"></td>
<td class="empty" colspan="4"></td>
</tr>
<!-- Row 7 (level 4) -->
<tr>
<td class="empty" colspan="3"></td>
<td class= "ct" colspan="13"></td>
</tr>
<!-- Row 8 (level 3) -->
<tr>
<td class="empty" colspan="2"></td>
<td class= "ct" colspan="15"></td>
<td class="empty" colspan="2"></td>
</tr>
<!-- Row 9 (level 2) -->
<tr>
<td class="empty"></td>
<td class= "ct" colspan="17"></td>
<td class="empty"></td>
</tr>
<!-- Row 10 (level 1) -->
<tr>
<td></td> <td colspan=""></td> <td colspan=""></td> <td colspan=""></td> <td
colspan=""></td> <td colspan=""></td> <td colspan=""></td> <td colspan=""></td> <td
colspan=""></td> <td colspan=""></td> <td colspan=""></td> <td colspan=""></td> <td
colspan=""></td> <td colspan=""></td> <td colspan=""></td> <td colspan=""></td> <td
colspan=""></td> <td colspan=""></td> <td colspan=""></td>
</tr>
</table>
</body>
</html>
Output:-
Ques-1(g): 5.10 table code:
Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Tables</title>
<style>
th, td {
border: 1px solid black;
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h1>Nested Tables</h1>
<table border="5">
<tr>
<th>Header column 1</th>
<th>Header column 2</th>
<th>Header column 3</th>
<th>Header column 4</th>
</tr>
<tr>
<td>Row 2 - Item 1</td>
<td>Row 2 - Item 2</td>
<td rowspan="3">
Row2: Nested Table 1
<table border="2">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 3 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 2 - Item 4<br>A second line</td>
</tr>
<tr>
<td colspan="2">Row 3: Nested Table 2</td>
<td>Row 3 - Item 3</td>
</tr>
<tr>
<td>Row 4 - Item 1</td>
<td>Row 4 - Item 2</td>
<td>Row 4 - Item 3</td>
</tr>
<tr>
<td colspan="4">Row 5 - Last row of outer table</td>
</tr>
</table>
</body>
</html>
Output:-
Ques-2: Frame 1 code :
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Mixed Frames Layout</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 33% 67%;
height: 100vh; /* Full viewport height */
}
.left-section {
display: grid;
grid-template-rows: 50% 50%;
}
iframe {
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<!-- Left Section: Two Vertical Frames -->
<div class="left-section">
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head><title>Frame 1</title></head>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>
"></iframe>
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head><title>Frame 2</title></head>
<body>
<h1>Frame 2</h1>
<p>Contents of Frame 2</p>
</body>
</html>
"></iframe>
</div>
<!-- Right Section: Two Horizontal Frames -->
<div>
<div style="display: grid; grid-template-columns: 50% 50%; height: 100%;">
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head><title>Frame 3</title></head>
<body>
<h1>Frame 3</h1>
<p>Contents of Frame 3</p>
</body>
</html>
"></iframe>
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head><title>Frame 4</title></head>
<body>
<h1>Frame 4</h1>
<p>Contents of Frame 4</p>
</body>
</html>
"></iframe>
</div>
</div>
</div>
</body>
</html>
Output:-
Ques-2(b): Frame 2 code:
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Iframe Layout</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-rows: 50% 50%;
height: 100vh; /* Full height of the viewport */
}
.top-section {
display: grid;
grid-template-columns: 100%;
}
.bottom-section {
display: grid;
grid-template-columns: 33% 33% 34%;
}
iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<!-- Top Section -->
<div class="top-section">
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
<style>
body {
background-color: grey;
}
h1, p {
margin: 0;
padding: 10px;
}
h1{
color:blue
}
</style>
</head>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>
"></iframe>
</div>
<!-- Bottom Section -->
<div class="bottom-section">
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<h1>Frame 2</h1>
<p>Contents of Frame 2</p>
<ul>
<li><a href='#'>Load frame [Link]</a></li>
<li><a href='#'>Load frame [Link]</a></li>
<li><a href='#'>Load frame [Link]</a></li>
<li><a href='#'>Load frame [Link]</a></li>
</ul>
</body>
</html>
"></iframe>
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
</head>
<style>
body {
background-color: grey;
}
h1, p {
margin: 0;
padding: 10px;
}
h1{
color:blue
}
</style>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>
"></iframe>
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head>
<title>Frame 5</title>
</head>
<body>
<h1>Frame 4</h1>
<p>Contents of Frame 4</p>
</body>
</html>
"></iframe>
</div>
</div>
</body>
</html>
Output:-
Ques-2(c): Frame 3 code:
Asnwer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames Using Iframes</title>
<style>
body {
margin: 0;
display: grid;
grid-template-rows: 30% 40%;
height: 100vh;
}
.row1 {
display: flex;
}
.row2 {
display: grid;
grid-template-columns: 25% 50% 25%;
}
iframe {
border: 1px solid black;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="row1">
<iframe name="frame1" srcdoc="
<html>
<style>
body{
background-color:grey;
}
h1{
color:red
}
</style>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>"></iframe>
</div>
<div class="row2">
<iframe name="frame2" srcdoc="
<html>
<style>
h1{
color:red;}
</style>
<body>
<h1>Frame2</h1>
<p>Contents of Frame 2</p>
</body>
</html>"></iframe>
<iframe name="frame3" srcdoc="
<html>
<style>
h1{
color:red;}
</style>
<body>
<h1>Frame3</h1>
<p>Contents of Frame 3</p>
</body>
</html>"></iframe>
<iframe name="frame4" srcdoc="
<html>
<style>
h1{
color:red;}
</style>
<body>
<h1>Frame4</h1>
<p>Contents of Frame 4</p>
</body>
</html>"></iframe>
</div>
<div class="row1">
<iframe name="frame5" srcdoc="
<html>
<style>
h1{
color:red;}
</style>
<body>
<h1>Frame5</h1>
<p>Contents of Frame 5</p>
</body>
</html>"></iframe>
</div>
</body>
</html>
Output:-
Ques-3: Design a webpage using frames where you will display the
menu bar, contact information and main part, where you are going to
display the material of web technology class.
Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Technology Class</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 15px;
font-size: 1.5em;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#container {
display: flex;
flex: 1;
overflow: hidden;
}
#menu {
width: 250px;
background-color: #f8f9fa;
border-right: 1px solid #ddd;
padding: 15px;
box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
#menu a {
display: block;
margin: 10px 0;
color: #007BFF;
text-decoration: none;
font-size: 1.1em;
transition: color 0.3s;
}
#menu a:hover {
color: #0056b3;
}
#menu .menu-section {
margin-bottom: 20px;
}
#menu .menu-section h3 {
margin-bottom: 10px;
color: #333;
font-size: 1.2em;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
#main {
flex: 1;
background: linear-gradient(135deg, #007BFF, #00C6FF);
padding: 0;
overflow: hidden;
}
iframe {
border: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header>
Web Technology Class
</header>
<div id="container">
<!-- Menu Section -->
<nav id="menu">
<div class="menu-section">
<h3>Navigation</h3>
<a href="[Link]" target="content">Welcome</a>
<a href="[Link]" target="content">Contact Information</a>
<a href="[Link]" target="content">Class Material</a>
</div>
<div class="menu-section">
<h3>Resources</h3>
<a href="[Link] target="_blank">MDN Web Docs</a>
<a href="[Link] target="_blank">W3Schools</a>
<a href="[Link] target="_blank">Stack Overflow</a>
</div>
<div class="menu-section">
<h3>Tools</h3>
<a href="[Link] target="_blank">CodePen</a>
<a href="[Link] target="_blank">GitHub</a>
</div>
</nav>
<!-- Main Content Section -->
<section id="main">
<iframe name="content" src="[Link]"></iframe>
</section>
</div>
</body>
</html>
[Link]:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #007BFF, #00C6FF);
color: white;
text-align: center;
}
.welcome-container {
background: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
max-width: 600px;
animation: fadeIn 2s ease-in-out;
}
.welcome-container h1 {
font-size: 2.5em;
margin-bottom: 20px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.welcome-container p {
font-size: 1.2em;
line-height: 1.5;
margin-bottom: 30px;
}
.button-container {
display: flex;
justify-content: center;
gap: 20px;
}
.button-container a {
text-decoration: none;
color: white;
background-color: #FF5722;
padding: 10px 20px;
border-radius: 5px;
font-size: 1em;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.button-container a:hover {
background-color: #E64A19;
transform: scale(1.1);
}
.button-container a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transform: scale(0);
transition: transform 0.3s ease-in-out;
border-radius: 50%;
}
.button-container a:hover::before {
transform: scale(2);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="welcome-container">
<h1>Welcome to Web Technology</h1>
<p>Dive into the exciting world of web development. Explore resources, learn new skills, and
build amazing projects with our comprehensive materials.</p>
<div class="button-container">
<a href="[Link]" target="_parent">Explore Materials</a>
<a href="[Link]" target="_parent">Contact Us</a>
</div>
</div>
</body>
</html>
Output:-