2. Develop the
HTML page named as “Table.html” to display your class time table.
a) Provide the
title as Time Table with table header and table footer, row-span and col-span
etc.
b) Provide
various colour options to the cells (Highlight the lab hours and elective hours
with different colours.)
c) Provide
colour options for rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Time Table</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1, h3, h4 {
text-align: center;
}
table {
width: 100%;
margin: 20px auto;
border-collapse: collapse;
text-align: center;
}
th, td {
border: 1px solid black;
padding: 10px;
font-size: 14px;
}
th {
background-color: #4CAF50; /* Header background color */
color: white;
}
td {
background-color: #f9f9f9; /* Light background for table cells */
}
/* Styling for Lab Hours */
.lab {
background-color: #ffeb3b; /* Yellow for lab hours */
}
/* Styling for Proctor Meeting */
.proctor {
background-color: #f44336; /* Red for proctor meetings */
color: white;
}
/* Styling for Club Activities */
.club {
background-color: #2196F3; /* Blue for club activities */
color: white;
}
/* Break Styling */
.break {
background-color: #e0e0e0; /* Gray for break row */
font-weight: bold;
}
/* Footer and other text styling */
tfoot td {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Department of Computer Science & Engineering</h1>
<h3>Time Table</h3>
<h4>Branch: Computer Science & Engineering Semester: V Section: A Venue: CRC 206 Academic Year: 2024-25 (ODD)</h4>
<table>
<thead>
<tr>
<th>Day</th>
<th>09:00 AM To 10:00 AM</th>
<th>10:00 AM To 11:00 AM</th>
<th>11:15 AM To 12:15 PM</th>
<th>12:15 PM To 01:15 PM</th>
<th>02:00 PM To 03:00 PM</th>
<th>03:00 PM To 04:00 PM</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>BCS503[T]</td>
<td>BCS502[L]</td>
<td>BCS515B[L]</td>
<td>BCS501[L]</td>
<td>BCS503[L]</td>
<td class="club">Spark-IT Club Activity</td> <!-- Club activity in blue -->
</tr>
<tr>
<td>Tuesday</td>
<td>BCS501[L]</td>
<td>BCS515B[L]</td>
<td>BCS503[L]</td>
<td>BRMK557[L]</td>
<td>BCS502[L]</td>
<td class="proctor">PROCTOR MEETING</td> <!-- Proctor meeting in red -->
</tr>
<tr>
<td>Wednesday</td>
<td>BCS503[T]</td>
<td>BRMK557[L]</td>
<td>BCS515B[L]</td>
<td>BCS501[L]</td>
<td>BCS502[L]</td>
<td class="club">Open Source Club Activity</td> <!-- Club activity in blue -->
</tr>
<tr>
<td>Thursday</td>
<td>BRMK557[T]</td>
<td>BCS503[T]</td>
<td class="lab" colspan="2">Batch A1: BCS502/Jupiter-1 Lab<br>Batch A2: BCSL504/Jupiter-2 Lab</td> <!-- Lab session in yellow -->
<td>BESK508[L]</td>
<td class="club">AICTE Activity Point Program</td> <!-- Club activity in blue -->
</tr>
<tr>
<td>Friday</td>
<td>BCS501[L]</td>
<td>BRMK557[T]</td>
<td class="lab" colspan="2">Batch A1: BCS502/Jupiter-1 Lab<br>Batch A2: BCSL504/Jupiter-2 Lab</td> <!--
Lab session in yellow -->
<td>BESK508[L]</td>
<td class="club">Cultural Club Activity</td> <!-- Club activity in blue -->
</tr>
<tr>
<td>Saturday</td>
<td colspan="6">BCS586 [Mini Project]</td>
</tr>
<tr class="break">
<td colspan="7">Tea Break: 11:00 AM to 11:15 AM | Lunch Break: 1:15 PM to 2:00 PM
L: Lecture T: Tutorial P: Practical</td>
</tr>
</tbody>
</table>
</body>
</html>
- Basic
HTML Structure:
- The
code starts with a standard HTML structure, including the DOCTYPE, html, head,
and body tags.
- Inside
the head, the meta tag ensures proper character encoding and responsive
design for mobile devices.
- The
style tag contains all the CSS used to style the timetable.
- CSS
Styling:
- The
timetable is styled with CSS to ensure it's visually appealing and
easy to understand.
- Table
Header Styling:
- The
headers (day, time slots) are styled with a green background (#4CAF50)
and white text to make the headings stand out.
- Table
Data Styling:
- Each
cell has a light background (#f9f9f9) for a clean, neutral look.
- Lab
Hours:
- Lab
sessions are highlighted in yellow (#ffeb3b) to indicate they are
practical, hands-on hours.
- Proctor
Meeting:
- The
proctor meeting on Tuesday is highlighted in red (#f44336) with
white text to make it stand out as a special event in the schedule.
- Club
Activities:
- Different
club activities (like Spark-IT Club, Open Source Club, AICTE Activity,
Cultural Club) are highlighted in blue (#2196F3) with white text,
differentiating them from regular classes.
- Break
Styling:
- Tea
break and lunch break are marked with a gray background to
indicate non-class hours. These breaks help in understanding the daily
structure of the schedule.
- Table
Layout:
- The
table is divided into several columns representing the time slots for
each day, starting from 9:00 AM and ending at 4:00 PM.
- Each
day of the week has its own row, and the relevant subjects are placed in
their respective time slots.
- On Thursday
and Friday, the lab sessions are merged into two-hour blocks
using the colspan="2" attribute, indicating that both theory
and lab are combined for these slots.
- Break
Times:
- Below
the table, there's a row that provides the timings for the tea break
(from 11:00 AM to 11:15 AM) and the lunch break (from 1:15 PM to
2:00 PM). This helps to clearly indicate when breaks occur during the
day.
- Footer:
- The
footer of the table includes an explanation of the symbols used: L for Lecture,
T for Tutorial, and P for Practical.
Visual Enhancements:
- Colors:
Various colors are used to differentiate between different types of
sessions and activities, making the timetable easier to navigate:
- Green
for headers.
- Yellow
for lab hours.
- Red
for proctor meetings.
- Blue
for club activities.
- Gray
for breaks.
This color-coding ensures that students and staff can
quickly identify important sessions and breaks throughout the day.
This code can be easily customized by changing the subject
names, time slots, or colors to match your specific needs.
Viva-voce Questions:
1. What is the main purpose of this HTML program?
Expected Answer: The
program is designed to create a class timetable that visually displays lecture,
lab, and club activity schedules using HTML and CSS.
2. Can you explain the basic structure of the HTML document
used in this program?
Expected Answer:
The document starts with a `<!DOCTYPE html>`, followed by an `html` tag,
and contains `head` (for metadata and styles) and `body` (for the content)
sections.
3. What are the main sections of the timetable represented
in the HTML code?
Expected Answer:
The main sections include the header (Department and academic details), table
structure (days and time slots), and additional activities like club events and
breaks.
4. How did you create the table structure in this timetable?
Expected Answer:
The table is created using the `<table>`, `<thead>`,
`<tbody>`, `<tr>`, `<th>`, and `<td>` tags, with each
row representing a day of the week and columns representing different time
slots.
5. How is the time for each period represented in the HTML
code?
Expected Answer:
Each time slot is represented as columns in the table header using `<th>`
tags (e.g., 09:00 AM to 10:00 AM, 10:00 AM to 11:00 AM, etc.).
6. What is the significance of the `colspan` attribute in
this timetable?
Expected Answer:
The `colspan` attribute is used to merge two columns into one cell for sessions
that span multiple time slots (e.g., lab sessions that last for two hours).
7. How are lab sessions differentiated in the timetable,
both visually and in the code?
Expected Answer:
Lab sessions are visually highlighted in **yellow** using the `.lab` class in
CSS. In the HTML code, lab sessions are indicated with `colspan="2"`
to span across two time slots.
8. What role does CSS play in this timetable?
Expected Answer:
CSS is used to style the timetable by adding colors, spacing, and text
alignment. It also makes the timetable more visually appealing and easy to
navigate.
9. How did you style the headers and time slots in this
program?
Expected Answer: The
headers are styled using a green background (`#4CAF50`) with white text for
better visibility, applied via CSS rules in the `<style>` section.
10. How are the proctor meetings styled differently from
other sessions?
Expected Answer:
Proctor meetings are highlighted in **red** with white text using the
`.proctor` class to make them stand out as special events in the timetable.
11. What is the purpose of the `.club` class in this
program?
Expected Answer:
The `.club` class is used to visually distinguish club activities by applying a
**blue background** (`#2196F3`) and white text.
12. How did you handle the tea and lunch breaks in this
timetable?
Expected Answer:
Breaks are placed in a separate row with a gray background (`#e0e0e0`) to
indicate non-class hours. The break timings are displayed as text in a
`<td>` cell that spans all columns using `colspan="7"`.
13. Why did you use the `thead`, `tbody`, and `tfoot` tags
in the table?
Expected Answer:
The `thead` defines the table header, the `tbody` contains the body content
(day-wise timetable), and the `tfoot` is used for the footer, explaining what
`L`, `T`, and `P` represent.
14. What is the significance of the `.break` class, and how
is it applied?
Expected Answer:
The `.break` class is applied to the row that displays the tea and lunch
breaks. It uses gray background styling to differentiate the break periods from
regular timetable entries.
15. How are club activities scheduled in this timetable?
Expected Answer:
Club activities like Spark-IT, Open Source, and Cultural Club are placed in
specific time slots using the `.club` class and are highlighted with blue
background styling for easy identification.
16. Can you explain how CSS classes are used to
differentiate different events in the timetable?
Expected Answer:
CSS classes like `.lab`, `.proctor`, and `.club` are used to apply different
colors and styles to lab sessions, proctor meetings, and club activities. These
classes ensure visual separation between different types of events.
17. What is the purpose of the `h1`, `h3`, and `h4` tags in
the timetable program?
Expected Answer:
These tags are used for headings. The `h1` tag is for the main title
(Department name), `h3` for the timetable heading, and `h4` for branch,
semester, section, venue, and academic year details.
18. What is the use of the `border-collapse` property in the
table's CSS?
Expected Answer:
The `border-collapse` property in CSS ensures that the table's borders are
collapsed into a single border for adjacent cells, providing a cleaner, more
compact look.
19. Why did you use inline CSS for this program instead of
linking to an external stylesheet?
Expected Answer:
Inline CSS is used here for simplicity and ease of demonstration in a single
HTML file, but external stylesheets could be used for larger projects for
better organization and reusability.
20. How would you modify this timetable to handle a
different section or semester?
Expected Answer:
To modify the timetable, I would update the subject codes, timings, or club
activity details in the table cells (`<td>`) while maintaining the
overall structure. The timetable can be customized by adjusting content as
needed.
-:END:-
Comments
Post a Comment