Here are complete answers to all 7 questions from the BCA 1st Semester Web Development Practical Exam (BCAC292):
Q1. Create a Personal Web Card (Home Page)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<img src="myphoto.jpg" alt="My Photo" width="150">
<h1>Sagar Singh</h1>
<p>Aspiring Web Developer</p>
</div>
</body>
</html>
style.css
body {
background-color: #ADD8E6; /* Favorite color */
text-align: center;
font-family: Arial, sans-serif;
}
.card {
margin-top: 100px;
}
Q2. JavaScript for Button Alert
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Alert</title>
<script>
function showAlert() {
alert("Thanks for visiting my site!");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click Me</button>
</body>
</html>
Q3. Project Details Table
<!DOCTYPE html>
<html lang="en">
<head>
<title>Projects</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</style>
</head>
<body>
<h2>My Projects</h2>
<table>
<tr>
<th>Project Name</th>
<th>Type</th>
<th>Year</th>
<th>Link</th>
</tr>
<tr>
<td>My Portfolio</td>
<td>Personal Site</td>
<td>2025</td>
<td><a href="#">Visit</a></td>
</tr>
<tr>
<td>To-Do App</td>
<td>JavaScript</td>
<td>2024</td>
<td><a href="#">Visit</a></td>
</tr>
</table>
</body>
</html>
Q4. HTML to Generate Given Output
<!DOCTYPE html>
<html>
<head><title>List Example</title></head>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Q5. HTML Form with CSS Design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.form-container {
background-color: white;
width: 100%;
max-width: 500px;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.form-title {
text-align: center;
color: #2c3e50;
margin-bottom: 25px;
font-size: 24px;
font-weight: bold;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #34495e;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
transition: border-color 0.3s;
}
input:focus,
select:focus {
border-color: #3498db;
outline: none;
}
.button-group {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 25px;
}
button {
padding: 12px 25px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.save-btn {
background-color: #3498db;
color: white;
}
.save-btn:hover {
background-color: #2980b9;
}
.reset-btn {
background-color: #e74c3c;
color: white;
}
.reset-btn:hover {
background-color: #c0392b;
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-title">Registration Form</div>
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" required>
</div>
<div class="form-group">
<label for="firstname">FirstName</label>
<input type="text" id="firstname" name="firstname" required>
</div>
<div class="form-group">
<label for="lastname">LastName</label>
<input type="text" id="lastname" name="lastname" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone No</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="location">Location</label>
<select id="location" name="location" required>
<option value="">Select Location</option>
<option value="north">North</option>
<option value="south">South</option>
<option value="east">East</option>
<option value="west">West</option>
</select>
</div>
<div class="button-group">
<button type="reset" class="reset-btn">Reset</button>
<button type="submit" class="save-btn">Save</button>
</div>
</form>
</div>
</body>
</html>
Q6. Change Text with Button (DOM Task)
<!DOCTYPE html>
<html>
<head>
<title>Change Text</title>
<script>
function changeHeading() {
document.getElementById("mainHeading").innerText = "Thanks for Clicking!";
}
</script>
</head>
<body>
<h1 id="mainHeading">Welcome to My Website!</h1>
<button onclick="changeHeading()">Click to Change Text</button>
</body>
</html>
Q7. Fill in the blanks
I.
<a href="https://example.com">Click Me</a>
II.
body {
background-color: Black;
font-family: Arial;
}
III.
<button onclick="changeText()">Click Me</button>
IV.
<script>
function greet() {
alert("Welcome to my site!");
}
</script>
If you need these as downloadable files or combined into a zip, I can generate that too.
