BCS053
Web Programming
IGNOU Assignment
Q1) Using tables, create a webpage displaying the batchwise schedule of the counselling sessions of the courses at Study Centre. This table should have proper headings. The columns of the table should display the batch number, course code, session time and the name of the counsellor taking the session. Create a second page using an ordered list showing the batch wise list of student’s enrolment number and names. You should use <div> tags, wherever needed; and create an internal CSS file, which formats the web pages as given below The headings of the table must be in 14-point Bold and all other content should be in 12-point Arial font. The table heading should be in different shade. The data rows of the table should have alternatively light yellow and light green colour. The background of the table should be light pink. The font of the unordered list should be "Arial" with font size of 12 points. The background colour of list should be light blue.
Solutions : First page with batchwise schedule of counsellers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Batchwise Schedule</title>
<style>
/*internal CSS*/
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
background-color: lightpink;
}
th {
background-color: #ffc0cb; /* Light Pink */
font-size: 14px;
font-weight: bold;
}
th,
td {
padding: 10px;
text-align: left;
font-size: 12px;
}
.light-yellow {
background-color: #ffffe0; /* Light Yellow */
}
.light-green {
background-color: #90ee90; /* Light Green */
}
h1{
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<h1>Batchwise Schedule</h1>
<table>
<thead>
<tr>
<th>Batch Number</th>
<th>Course Code</th>
<th>Session Time</th>
<th>Counsellor</th>
</tr>
</thead>
<tbody>
<tr class="light-yellow">
<td>1</td>
<td>CSE101</td>
<td>10:00 AM</td>
<td>Sir Chandrshekhar</td>
</tr>
<tr class="light-green">
<td>2</td>
<td>BCS202</td>
<td>11:30 AM</td>
<td>Sir Mahesh</td>
</tr>
<tr class="light-yellow">
<td>3</td>
<td>MCS104</td>
<td>12:30 PM</td>
<td>Sir Ravi</td>
</tr>
<tr class="light-green">
<td>4</td>
<td>CS204</td>
<td>01:30 PM</td>
<td>Sir Jagdish</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</body>
</html>
Output:
Second page with student name and enrollment number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Batchwise Enrolment</title>
<style>
ol {
background-color: lightblue;
padding: 10px;
list-style-type: none;
}
ol li {
font-size: 12px;
}
h1{
color: brown;
}
</style>
</head>
<body>
<div class="container">
<h1>Batchwise Enrolment</h1>
<ol>
<li>101 - Satish</li>
<li>102 - Ram</li>
<li>103 - Sita</li>
<li>104 - Sridhar</li>
<!-- Add more list items as needed -->
</ol>
</div>
</body>
</html>
2.png)
1.png)
No comments:
Post a Comment