IGNOU BCS053 Web Programming Assignment 2021-22 Q1c Solution. Using table and lists create two web pages
IGNOU BCS053 Web Programming Assignment 2021-22 Q1c Solution. Using table and lists create two web pages
| Course Code Course Title Assignment Number Maximum Marks Last Date of Submission | : : : : : | BCS-053 Web Programming BCA (5)053/Assignment/2021-22 100 31st October, 2021 (For July, Session) 15th April, 2022 (For January, Session) |
1c) Using table and lists create two web pages, first displaying the list of all the course writers of
BCS053 course. This information should be created in a table, the table should have a heading. The columns of the table should display the Unit number, unit name and unit writer’s name. The second page should display an unordered list, displaying the list of expert committee members of BCS053 course. You should use <div> tags, wherever needed; and create an internal CSS file, which formats the web pages as follows: (You must submit the HTML and CSS code and the screenshot of pages in a browser window)
| (i) (ii) | The headings of the table must be in Bold and all other content should be in italics font. The table heading should be in different shade. The data rows of the table should have alternatively light yellow and light green color. The background of the table should be light grey. |
background colour of list should be light red.
(iv) You must demonstrate how changes in CSS can change the display at the time of Viva.
(6 Marks)
Solution:
Home.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style type="text/css">
#main{
background-color: seagreen;
height: 100px;
padding: 10px;
text-align: center;
}
#header{
background-color: blue;
}
#links{
width: 90%;
background-color: #000;
}
#links th{
background-color: #ff7f7f;
font-size: 18pt;
}
p,li{
font-size: 15pt;
}
</style>
</head>
<body bgcolor="pink">
<div id="main"><h1>BCS053: Web Programming</h1>
<h2>Assignment/2021-22</h2></div>
<div id="header">
<div><center><table id="links"><thead><tr><th><a href="home.html">Home</a></th><th><a href="table.html"> Writers</a></th><th><a href="lists.html"> Experts</a></th></tr></thead></table></div>
</div>
<p>
Using table and lists create two web pages, first displaying the list of all the course writers of BCS053 course. This information should be created in a table, the table should have a heading. The columns of the table should display the Unit number, unit name and unit writer’s name. The second page should display an unordered list, displaying the list of expert committee members of BCS053 course. You should use <'div'> tags, wherever needed; and create an internal CSS file, which formats the web pages as follows: (You must submit the
HTML and CSS code and the screenshot of pages in a browser window)</p>
<ol type="i">
<li>The headings of the table must be in Bold and all other content should be in italics font.</li>
<li>The table heading should be in different shade. The data rows of the table should have alternatively light yellow and light green color. The background of the table should be light grey.</li>
<li>The font of the unordered list should be "Arial" with font size of 12 points. The background colour of list should be light red.</li>
<li>You must demonstrate how changes in CSS can change the display at the time of Viva.</li>
</ol>
(6 Marks)
</body>
</html>
Table.html
<!DOCTYPE html>
<html>
<head>
<title>BCS053 Course Writers</title>
<style type="text/css">
#main{
background-color: seagreen;
height: 100px;
padding: 10px;
text-align: center;
}
#header{
background-color: blue;
}
#links{
width: 90%;
background-color: #000;
}
#links th{
background-color: #ff7f7f;
font-size: 18pt;
}
h1{
font-weight: bold;
}
#cw{
font-style: italic;
background-color: lightgrey;
}
th{background-color: #04AA6D;}
tr:nth-child(even){background-color: lightyellow;}
tr:nth-child(odd){background-color: lightgreen;}
</style>
</head>
<body bgcolor="lightblue">
<div id="main"><h1>BCS053: Web Programming</h1></div>
<div id="header">
<div><center><table id="links"><thead><tr><th><a href="home.html">Home</a></th><th><a href="table.html"> Writers</a></th><th><a href="lists.html"> Experts</a></th></tr></thead></table></div>
</div>
<center>
<h1> The list of all the course writers of BCS053 course.</h1>
<table border="2" id="cw">
<tr><th>Unit Number</th><th>Unit Name</th><th>Writer's Name</th></tr>
<tr><td>Unit-1</td><td>WEB 2.0 AND XHTML/HTML5</td><td>ABC</td></tr>
<tr><td>Unit-2</td><td>USING STYLE SHEETS</td><td>XYZ</td></tr>
<tr><td>Unit-3</td><td>Introduction to XML</td><td>UVW</td></tr>
<tr><td>Unit-4</td><td>DOCUMENT OBJECT MODEL</td><td>DEF</td></tr>
<tr><td>Unit-5</td><td>Introduction to WAP and WML</td><td>GHI</td></tr>
</table>
</center>
</body>
</html>
Lists.html
<title>Expert's List </title>
<style type="text/css">
#main{
background-color: seagreen;
height: 100px;
padding: 10px;
text-align: center;
}
#header{
background-color: blue;
}
#links{
width: 90%;
background-color: #000;
}
#links th{
background-color: #ff7f7f;
font-size: 18pt;
}
#ecm{
font: 12pt Arial;
background-color: #FF7F7F;
}
</style>
</head>
<body>
<div id="main"><h1>BCS053: Web Programming</h1>
<h2>Assignment/2021-22</h2></div>
<div id="header">
<div><center><table id="links"><thead><tr><th><a href="home.html">Home</a></th><th><a href="table.html"> Writers</a></th><th><a href="lists.html"> Experts</a></th></tr></thead></table></div>
</div>
<h1>The list of expert committee members of BCS053 course</h1>
<div id="ecm">
<ul>
<li>Beginning Web Programming with HTML, XHTML and CSS</li>
<ul>
<li>Jon Duckett</li>
</ul>
<li>Internet and the World Wide Web</li>
<ul>
<li>Harvey M. Deitel</li>
<li>Paul J. Deitel</li>
</ul>
<li>Programming the World Wide Web</li>
<ul>
<li>Robert W. Sebesta</li>
</ul>
<li>HTML 4 Unleashed</li>
<ul>
<li>Rick Darnell</li>
</ul>
<li>XHTML 1.0</li>
<ul>
<li>S. Graham</li>
</ul>
</ul>
</div>
</body>
</html>
You can also visit my YouTube Channel Gaurav Pali MCA
