Why to study Web Technology ?

Learning Web Technology is crucial for engineering students because it equips them with essential skills to design and develop modern, user-friendly web applications. Understanding web technologies enables them to create interactive and responsive interfaces, integrate with back-end systems, and solve real-world problems. It also opens up diverse career opportunities in a rapidly growing industry, fostering innovation and adaptability in the ever-evolving digital landscape.

Laboratory Experiment - 2

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.

Program:


<!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 &nbsp; &nbsp; &nbsp; Semester: V &nbsp; &nbsp; &nbsp;  Section: A &nbsp; &nbsp; &nbsp; Venue: CRC 206 &nbsp; &nbsp; &nbsp; 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 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;L: Lecture T: Tutorial P: Practical</td>

        </tr>

    </tbody>

</table>

 

</body>

</html>


Output:


Program Explanation:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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

Popular posts from this blog

Why to study Web Technology ?