Course Code : MCSL-016
Course Title : Internet Concepts and Web Design (Lab Course)
Assignment Number : BCA(IV)/L-016/Assignment/2024-25
Maximum Marks : 100
Weightage : 25%
Last Dates for Submission : 31st October, 2024 (For July Session) 30th April, 2025 (For
January Session)
Note:
There are two questions in this assignment carrying a total of 80 marks. Rest 20 marks are
for viva voce. You may use illustrations and diagrams to enhance the explanations. Please
go through the guidelines regarding assignments given in the Programme Guide for the
format of the presentation. Submit the screenshots along with the coding and
documentation.
Question 1: (70 Marks) 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.
Solution:
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Heading -->
<div class="header">
<img src="university_logo.gif" alt="University Logo">
<h1>Welcome to Tilottoma University</h1>
</div>
<!-- Menu -->
<div class="menu">
<a href="home.html">Home</a>
<a href="programmewise_student_list.html">Programme-wise List</a>
<a href="student_registration.html">Student Registration</a>
<a href="feedback.html">Feedback</a>
</div>
<!-- Content -->
<div class="content">
<h2>Message from the Head of the University</h2>
<p>Welcome to Tilottoma University! Congratulations to all the successful
students for making it through the entrance examination. We look forward to seeing
you at the University. We are committed to providing the best education and an
excellent learning experience.</p>
</div>
</body>
</html>
programmewise_student_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programme-wise Student List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Heading -->
<div class="header">
<img src="university_logo.png" alt="University Logo">
<h1>Tilottoma University - Successful Students</h1>
</div>
<!-- Menu -->
<div class="menu">
<a href="home.html">Home</a>
<a href="programmewise_student_list.html">Programme-wise List</a>
<a href="student_registration.html">Student Registration</a>
<a href="feedback.html">Feedback</a>
</div>
<!-- Content -->
<div class="content">
<h2>Programme-wise Successful Students List</h2>
<ul>
<li>Bachelor of Science (B.Sc)
<ul>
<li>Student 1</li>
<li>Student 2</li>
</ul>
</li>
<li>Bachelor of Arts (B.A)
<ul>
<li>Student 3</li>
<li>Student 4</li>
</ul>
</li>
<!-- Add more programs and students here -->
</ul>
</div>
</body>
</html>
student_registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration</title>
<link rel="stylesheet" href="styles.css">
<script>
function validateForm() {
let name = document.forms["registrationForm"]["studentName"].value;
let program = document.forms["registrationForm"]["program"].value;
let serial = document.forms["registrationForm"]["serialNumber"].value;
if (name == "" || program == "" || serial == "") {
alert("All fields must be filled out");
return false;
return true;
</script>
</head>
<body>
<!-- Heading -->
<div class="header">
<img src="university_logo.png" alt="University Logo">
<h1>Tilottoma University - Student Registration</h1>
</div>
<!-- Menu -->
<div class="menu">
<a href="home.html">Home</a>
<a href="programmewise_student_list.html">Programme-wise List</a>
<a href="student_registration.html">Student Registration</a>
<a href="feedback.html">Feedback</a>
</div>
<!-- Content -->
<div class="content">
<h2>Student Registration Form</h2>
<form name="registrationForm" onsubmit="return validateForm()">
<label for="studentName">Name of Student:</label><br>
<input type="text" id="studentName" name="studentName"><br><br>
<label for="program">Programme:</label><br>
<input type="text" id="program" name="program"><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>
</div>
</body>
</html>
feedback.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Heading -->
<div class="header">
<img src="university_logo.png" alt="University Logo">
<h1>Tilottoma University - Feedback Form</h1>
</div>
<!-- Menu -->
<div class="menu">
<a href="home.html">Home</a>
<a href="programmewise_student_list.html">Programme-wise List</a>
<a href="student_registration.html">Student Registration</a>
<a href="feedback.html">Feedback</a>
</div>
<!-- Content -->
<div class="content">
<h2>Provide Your Feedback</h2>
<form>
<label for="studentName">Name of Student:</label><br>
<input type="text" id="studentName" name="studentName"><br><br>
<label for="feedback">Feedback:</label><br>
<textarea id="feedback" name="feedback"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #4CAF50;
padding: 20px;
text-align: center;
color: white;
.header img {
width: 50px;
vertical-align: middle;
.menu {
background-color: #333;
overflow: hidden;
.menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
.menu a:hover {
background-color: #ddd;
color: black;
.content {
padding: 20px;
h1, h2 {
color: #333;
}
Screenshots:
Question 2: (10 Marks)
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.
Solution:
Advantages of Using External Style Sheets in HTML
Using external CSS files has several benefits that make them preferable over inline or
internal CSS:
1. Consistency Across Pages: With external CSS, I can apply the same styles to multiple
HTML pages. If I need to change the appearance of the site, I only need to edit one
file instead of editing each HTML file. This saves a lot of time and effort, especially
for larger websites.
2. Separation of Concerns: By keeping the style separate from the content (HTML), my
code becomes more organized. HTML files focus on structure and content, while CSS
files handle the design. This approach makes the website easier to maintain and
update.
3. Improved Load Times: Since external CSS files are cached by the browser, they only
need to be downloaded once, which improves the load time for subsequent page
views.
4. Reusable Code: I can use the same CSS file across different projects or web pages,
promoting code reusability and ensuring a consistent look.
For example: In my HTML file, I simply link the external CSS file like this:
html
Copy code
<link rel="stylesheet" href="styles.css">
And in the styles.css file, I can define the styles:
css
Copy code
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
Advantages of Using Python for Web Development
Python is a popular choice for web development, and here’s why:
1. Simple and Readable: Python's syntax is straightforward and easy to learn, making it
ideal for both beginners and experienced developers. It allows me to write clean and
maintainable code quickly.
2. Frameworks like Django and Flask: These frameworks make building web
applications faster by providing ready-to-use components. Django, for instance,
follows a "batteries-included" approach, meaning it comes with built-in tools for
handling databases, forms, and authentication.
3. Dynamic Content Creation: Python can be used to generate dynamic content for
websites. It allows websites to be more interactive and personalized, responding to
user actions in real-time.
4. Cross-Platform Compatibility: Python works well across different operating systems.
This flexibility allows me to deploy web applications on various platforms easily.
