MCSL-016 Solved Free Assignment 2024-25 Sem 4
Question 1:
 A University maintains a website to display the programme wise list of students who were successful in its entrance examination and are eligible for admission. The website displays a list of programmes and for each programme a list of successful students. In addition, it also displays two forms – the first form allows student to register for the programme and second form is a feedback form about the website. Design and create four web pages for the e-Commerce company namely, Home, Programmewise_student_list, Student_Registration Form and Feedback form, having the following features:
 For consistency, every webpage of website should consist of three basic divisions –Â
Heading – This division should be the same for all four web pages and should display the name and logo of the University. This division should have different background colour.Â
Menu - This division should be the same for every web page. It should contain links to all the web pages, viz. Home, Programmewise_student_list, Student_Registration Form and Feedback form.
 Content - This division should display the basic information, as given below. The web pages that you are designing should differ in this Division only.Â
The Content division of the different pages should be as under:Â
ï‚· The Home page should include a message from the Head of the University, welcoming all the successful students to the University.
ï‚· The Programmewise_student_list page should display information about all the Programmes of the University and under each programme it should display the list of successful students. You should display this information by using multi-level lists.Â
ï‚· The Student_Registration page should contain a form, which should have fields – Name of the Student, Programme, and Serial Number in the List. You should write JavaScript code to verify that all the fields are filled with some data. This code should be run when the Submit button is pressed.Â
 The Feedback page should display another form that has two input fields – The name of the student and a text area for giving the feedback. This form should have a Submit button.
Ans:-Â Â To design and create the four web pages (Home, Programmewise Student List, Student Registration Form, and Feedback Form) for the University website, we need to ensure that each page maintains a consistent structure with three divisions: **Heading**, **Menu**, and **Content**. Below is a guide on how to create each web page, along with necessary HTML, CSS, and JavaScript code snippets.
 1. Basic Structure (Common to All Pages)
All pages will have the same **Heading** and **Menu** sections, with different content in the **Content** section. We will use CSS for layout and styling and JavaScript for validation on the form submission.
#### HTML Template for All Pages:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>University Website</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }
    header {
      background-color: #004080;
      color: white;
      padding: 10px;
      text-align: center;
    }
    header img {
      vertical-align: middle;
    }
    nav {
      background-color: #333;
      overflow: hidden;
    }
    nav a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
    }
    nav a:hover {
      background-color: #ddd;
      color: black;
    }
    section {
      padding: 20px;
      background-color: #fff;
      min-height: 400px;
    }
    footer {
      text-align: center;
      padding: 10px;
      background-color: #004080;
      color: white;
    }
  </style>
</head>
<body>
  <!-- Header Division -->
  <header>
    <img src="logo.png" alt="University Logo" height="50">
    <h1>Welcome to XYZ University</h1>
  </header>
  <!-- Menu Division -->
  <nav>
    <a href="home.html">Home</a>
    <a href="programmewise_student_list.html">Programme-wise Student List</a>
    <a href="student_registration.html">Student Registration</a>
    <a href="feedback.html">Feedback</a>
  </nav>
  <!-- Content Division (Will vary for each page) -->
  <section>
    <!-- Content goes here -->
  </section>
  <!-- Footer -->
  <footer>
    <p>© 2024 XYZ University. All rights reserved.</p>
  </footer>
</body>
</html>
```
 2. Individual Web Pages Content
 **Home Page (home.html)**
This page contains a welcoming message from the head of the university.
```html
<section>
  <h2>Message from the Head of the University</h2>
  <p>Welcome, dear students! Congratulations on your success in the entrance examination. We are excited to welcome you to XYZ University, where you will embark on a journey of academic excellence and personal growth. We wish you all the best in your academic pursuits and look forward to supporting you in your studies.</p>
</section>
```
 **Programme-wise Student List Page (programmewise_student_list.html)**
This page displays the list of successful students under each program using multi-level lists.
```html
<section>
  <h2>Programme-wise List of Successful Students</h2>
  <ul>
    <li><strong>Bachelor of Science (B.Sc)</strong>
      <ul>
        <li>John Doe</li>
        <li>Jane Smith</li>
        <li>Michael Lee</li>
      </ul>
    </li>
    <li><strong>Bachelor of Arts (B.A)</strong>
      <ul>
        <li>Emily Clark</li>
        <li>Daniel Scott</li>
        <li>Alice Brown</li>
      </ul>
    </li>
    <li><strong>Bachelor of Commerce (B.Com)</strong>
      <ul>
        <li>Chris Green</li>
        <li>Sophia White</li>
        <li>David Johnson</li>
      </ul>
    </li>
  </ul>
</section>
```
 **Student Registration Form (student_registration.html)**
This page contains a registration form and JavaScript validation to ensure all fields are filled.
```html
<section>
  <h2>Student Registration</h2>
  <form name="registrationForm" onsubmit="return validateForm()">
    <label for="studentName">Name of the Student:</label><br>
    <input type="text" id="studentName" name="studentName"><br><br>
    <label for="programme">Programme:</label><br>
    <input type="text" id="programme" name="programme"><br><br>
    <label for="serialNumber">Serial Number in the List:</label><br>
    <input type="text" id="serialNumber" name="serialNumber"><br><br>
    <input type="submit" value="Submit">
  </form>
  <script>
    function validateForm() {
      var name = document.forms["registrationForm"]["studentName"].value;
      var programme = document.forms["registrationForm"]["programme"].value;
      var serial = document.forms["registrationForm"]["serialNumber"].value;
      if (name == "" || programme == "" || serial == "") {
        alert("All fields must be filled out.");
        return false;
      }
      return true;
    }
  </script>
</section>
```
#### **Feedback Form (feedback.html)**
This page contains a simple feedback form with name and feedback input fields.
```html
<section>
  <h2>Feedback Form</h2>
  <form>
    <label for="studentName">Name of the Student:</label><br>
    <input type="text" id="studentName" name="studentName"><br><br>
    <label for="feedback">Your Feedback:</label><br>
    <textarea id="feedback" name="feedback" rows="5" cols="30"></textarea><br><br>
    <input type="submit" value="Submit">
  </form>
</section>
```
 3. Key Features:
- **Heading Division**: Displays the university name and logo consistently across all pages.
- **Menu Division**: Contains navigation links to all pages, maintaining consistency.
- **Content Division**: Varies based on the page:
 - Home page: Welcome message.
 - Programme-wise list page: Multi-level list of students.
 - Registration page: Form with validation.
 - Feedback page: Simple feedback form.
 Â
4. JavaScript Validation:
The JavaScript on the Student Registration page ensures that no form is submitted if any field is left empty, thus improving data accuracy.
These four web pages will create a consistent and user-friendly university website with all the required functionality.
Question 2:Â
What are the advantages of using external style sheet along with an HTML web page? Explain with the help of an example. List the advantages of using Python for web development.
Ans:-Â Â Advantages of Using External Style Sheets with an HTML Web Page:
An **external style sheet** (CSS file) is a separate file that contains the styling rules for a web page. Linking an HTML page to an external CSS file offers several advantages:
1. **Separation of Concerns**:
  - By using an external style sheet, the design and layout (CSS) are separated from the content (HTML). This makes the code cleaner and easier to maintain.
2. **Reusability Across Multiple Pages**:
  - You can apply the same style sheet to multiple HTML pages. This means you only need to write the CSS once, and it can be reused across the entire website, ensuring consistency in design.
3. **Easier Maintenance**:
  - If you need to update the design of your website, you only have to edit the external CSS file. The changes will automatically reflect on all pages linked to that style sheet, making it much easier to maintain a large website.
4. **Faster Loading**:
  - Once an external CSS file is downloaded by the browser, it is cached and used for subsequent pages, improving the loading speed of other pages on the same website.
5. **Smaller HTML Files**:
  - Since the styling is kept in a separate file, the HTML files are smaller and easier to read. This also reduces the amount of code duplication across different pages.
 Example:
```html
<!-- HTML Page (index.html) -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External CSS Example</title>
  <!-- Linking to an external style sheet -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is an example of using external CSS.</p>
</body>
</html>
```
```css
/* External CSS File (styles.css) */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333;
  text-align: center;
}
p {
  color: #666;
  padding: 10px;
}
```
In this example, the HTML file remains clean, and the external CSS file handles the styling for both the background color, font, and text alignment. The same CSS file can be linked to multiple HTML pages to provide consistent design.
---
 Advantages of Using Python for Web Development:
1. **Readable and Maintainable Code**:
  - Python’s simple syntax makes it easy to read and write, allowing developers to create clean and maintainable code, which is crucial for web development projects.
2. **Django and Flask Frameworks**:
  - Python offers powerful web development frameworks like **Django** and **Flask**. Django is a high-level framework that follows the **DRY (Don’t Repeat Yourself)** principle and comes with many built-in tools (authentication, ORM, admin panel), while Flask is a lightweight and flexible framework for small projects.
3. **Vast Library Support**:
  - Python has a vast collection of libraries and packages like **Requests** for HTTP requests, **BeautifulSoup** for web scraping, and **Pillow** for image manipulation, which helps speed up the development process.
4. **Rapid Development**:
  - Python’s simplicity and the availability of pre-built frameworks and libraries make it an ideal choice for rapid prototyping and development. This allows developers to create and iterate on projects quickly.
5. **Scalability**:
  - Python-based web applications can be easily scaled due to the framework support (e.g., Django) and Python’s ability to handle both simple and complex applications. Popular platforms like Instagram and Spotify use Python for this reason.
6. **Strong Community and Ecosystem**:
  - Python has a large and active developer community, which means there’s plenty of documentation, tutorials, and third-party packages available to support web development.
7. **Cross-Platform Support**:
  - Python is cross-platform, which means web applications written in Python can be deployed on various platforms like Windows, macOS, and Linux without modification.
By leveraging Python and its powerful frameworks, developers can build scalable, efficient, and maintainable web applications quickly.
No comments: