WorksheetsReview chapter 7,and 8
Total questions: 4
Worksheet time: 23mins
HTML tag used to create a table?
(a)
HTML tag used to create a form?
(a)
What is the HTML tag used to make heading for the table?
(a)
<!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>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
margin: 0;
background-color: #f5f5f5;
}
header {
text-align: center;
padding: 10px 0;
background-color: #333;
color: #222;
}
form {
background-color: #222;
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: 20px auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
label {
display: block;
margin-top: 15px;
}
input[type="text"],
input[type="email"],
input[type="date"],
select {
width: 100%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form-group {
margin-top: 15px;
}
.form-inline {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
}
input[type="submit"] {
margin-top: 20px;
background-color: #333;
color: #222;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
margin: 30px auto;
background-color: #222;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
th, td {
padding: 12px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #333;
color: #222;
}
@media (max-width: 600px) {
form, table {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<h1>Student Registration Portal</h1>
</header>
<main>
<form>
<h2>Register Here</h2>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="student-id">Student ID:</label>
<input type="text" id="student-id" name="student-id" required>
<!-- Gender Radio Buttons -->
<div class="form-group">
<label>Gender:</label>
<div class="form-inline">
<label><input type="radio" name="gender" value="male" selected> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</div>
</div>
<label for="course">Select Course:</label>
<select id="course" name="course">
<option value="web">Web Development</option>
<option value="mobile">Mobile App Design</option>
<option value="ai">Artificial Intelligence</option>
<option value="network">Networking Basics</option>
</select>
<label for="date">Enrollment Date:</label>
<input type="date" id="date" name="date">
<!-- Learning Mode Checkboxes -->
<div class="form-group">
<label>Preferred Learning Mode:</label>
<div class="form-inline">
<label><input type="checkbox" name="mode" value="online"> Online</label>
<label><input type="checkbox" name="mode" value="campus"> On-Campus</label>
<label><input type="checkbox" name="mode" value="hybrid"> Hybrid</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<section>
<h2 style="text-align: center;">Course Schedule</h2>
<table>
<th>
<tr>
<th>Course Name</th>
<th>Day</th>
<th>Time</th>
</tr>
</th>
<tr>
<td>Web Development</td>
<td>Monday</td>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr>
<td>Mobile App Design</td>
<td>Tuesday</td>
<td>12:30 PM - 2:30 PM</td>
</tr>
<tr>
<td>Artificial Intelligence</td>
<td>Wednesday</td>
<td>9:00 AM - 11:00 AM</td>
</tr>
<tr>
<td>Networking Basics</td>
<td>Thursday</td>
<td>1:00 PM - 3:00 PM</td>
</tr>
</table>
</section>
</main>
</body>
</html>
Which line of code represent the responsive design?
(a)
In CSS design what is header alignment ?
(a)
What is the tag name of the drop down list in the HTML form?
(a)
What is the (class selector) name of the checkbox?
(a)
Which data stored in the Second table row ?
Course Name
Day
Time
Mobile App Design Tuesday
12:30 PM - 2:30 PM
Web Development
Monday
10:00 AM - 12:00 PM
Artificial Intelligence Wednesday
9:00 AM - 11:00 AM
Networking Thursday 1:00 PM - 3:00 PM
What is the form element used for email?
(a)
Which Radio Button is by default is selected (selected attribute)
Male
Female
