Web Engineering Practical Notebook
Solved Practical Questions (HTML with minimal internal CSS)
Question 2
A bakery wants to showcase its menu online. Design an HTML page with a heading, a short welcome
paragraph, and an unordered list of at least five bakery items with their prices. Use appropriate
formatting tags like <b> and <em>.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Sweet Crumbs Bakery</title>
<style>
body { font-family: Arial, sans-serif; background: #fdf6ec; margin: 20px; }
h1 { color: #7a3e1d; }
ul { line-height: 1.8; }
</style>
</head>
<body>
<h1>Sweet Crumbs Bakery</h1>
<p>Welcome to <em>Sweet Crumbs Bakery</em>, where every bite is baked with
love and fresh ingredients.</p>
<ul>
<li><b>Chocolate Cake</b> - Rs. 800</li>
<li><b>Butter Croissant</b> - Rs. 150</li>
<li><b>Blueberry Muffin</b> - Rs. 200</li>
<li><b>Cinnamon Roll</b> - Rs. 180</li>
<li><b>Vanilla Cupcake</b> - Rs. 120</li>
</ul>
</body>
</html>
Question 3
A news website needs a homepage. Create an HTML page that includes a page title, a main heading,
three sub-headings each followed by a short paragraph. Use <h1>, <h2>, and <p> tags properly.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Daily Times News</title>
<style>
body { font-family: Georgia, serif; margin: 20px; color: #222; }
h1 { border-bottom: 2px solid #b30000; color: #b30000; }
h2 { color: #333; }
</style>
</head>
<body>
<h1>Daily Times</h1>
<h2>Local Elections Update</h2>
<p>Voters head to the polls this weekend as candidates make final appeals
across the city.</p>
<h2>Weather Forecast</h2>
<p>A mild week is expected with occasional showers and cool evening
breezes.</p>
<h2>Sports Roundup</h2>
<p>The city football team secured a narrow win in last night's championship
match.</p>
</body>
</html>
Question 5
A restaurant wants to display its weekly menu online. Create an HTML table with headings (Day,
Breakfast, Lunch, Dinner) and at least 5 rows of data. Apply border and padding attributes for
readability.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Weekly Menu</title>
<style>
table { border-collapse: collapse; width: 100%; font-family: Arial, sans-
serif; }
th, td { border: 1px solid #555; padding: 8px; text-align: left; }
th { background: #2c3e50; color: white; }
</style>
</head>
<body>
<h1>Weekly Restaurant Menu</h1>
<table>
<tr><th>Day</th><th>Breakfast</th><th>Lunch</th><th>Dinner</th></tr>
<tr><td>Monday</td><td>Pancakes</td><td>Grilled
Chicken</td><td>Pasta</td></tr>
<tr><td>Tuesday</td><td>Omelette</td><td>Beef
Burger</td><td>Steak</td></tr>
<tr><td>Wednesday</td><td>Cereal</td><td>Fish
Fillet</td><td>Pizza</td></tr>
<tr><td>Thursday</td><td>Toast</td><td>Veg Salad</td><td>BBQ
Ribs</td></tr>
<tr><td>Friday</td><td>Waffles</td><td>Chicken
Wrap</td><td>Biryani</td></tr>
</table>
</body>
</html>
Question 6
A library wants to list its available books online. Create an HTML page with a heading "Library
Catalog", a paragraph about the library, and a definition list (<dl>) containing at least four book titles
as terms and their authors as descriptions.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Library Catalog</title>
<style>
body { font-family: Verdana, sans-serif; margin: 20px; }
h1 { color: #1a5276; }
dt { font-weight: bold; margin-top: 8px; }
dd { margin-left: 20px; color: #555; }
</style>
</head>
<body>
<h1>Library Catalog</h1>
<p>Our library offers a wide collection of fiction, non-fiction, and
academic books for all readers.</p>
<dl>
<dt>Pride and Prejudice</dt>
<dd>Jane Austen</dd>
<dt>1984</dt>
<dd>George Orwell</dd>
<dt>To Kill a Mockingbird</dt>
<dd>Harper Lee</dd>
<dt>The Great Gatsby</dt>
<dd>F. Scott Fitzgerald</dd>
</dl>
</body>
</html>
Question 7
A gym wants to collect membership registration data. Design an HTML form that includes fields for
full name, age, email, membership type (radio buttons: Basic, Standard, Premium), preferred workout
days (checkboxes), and a submit button. Use proper <label> tags for each field.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Gym Membership Registration</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
label { display: block; margin-top: 10px; }
input[type=text], input[type=email], input[type=number] { padding: 5px;
width: 200px; }
</style>
</head>
<body>
<h1>Gym Membership Registration</h1>
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<p>Membership Type:</p>
<label><input type="radio" name="membership" value="Basic"> Basic</label>
<label><input type="radio" name="membership" value="Standard">
Standard</label>
<label><input type="radio" name="membership" value="Premium">
Premium</label>
<p>Preferred Workout Days:</p>
<label><input type="checkbox" name="days" value="Mon"> Monday</label>
<label><input type="checkbox" name="days" value="Wed"> Wednesday</label>
<label><input type="checkbox" name="days" value="Fri"> Friday</label>
<br><button type="submit">Submit</button>
</form>
</body>
</html>
Question 8
A fashion store wants to create a product page. Design an HTML page that includes a product image,
product name as a heading, a short description, original price with strikethrough using <s>,
discounted price in bold, and a hyperlink "Buy Now" that opens in a new tab.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Product Page</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; text-align: center; }
img { width: 220px; border-radius: 8px; }
.price { font-size: 18px; }
[Link] { display: inline-block; margin-top: 10px; padding: 8px 16px;
background: #d35400; color: white; text-decoration: none; border-
radius: 4px; }
</style>
</head>
<body>
<img src="[Link]" alt="Denim Jacket">
<h1>Classic Denim Jacket</h1>
<p>A timeless denim jacket made from premium cotton, perfect for every
season.</p>
<p class="price"><s>Rs. 5000</s> <b>Rs. 3500</b></p>
<a class="buy" href="[Link]" target="_blank">Buy Now</a>
</body>
</html>
Question 9
A school wants to publish its timetable online. Create an HTML table with headings (Period, Monday,
Tuesday, Wednesday, Thursday, Friday) and at least 6 rows of data. Use colspan for a lunch break
row that spans all days.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>School Timetable</title>
<style>
table { border-collapse: collapse; width: 100%; font-family: Arial, sans-
serif; }
th, td { border: 1px solid #444; padding: 8px; text-align: center; }
th { background: #34495e; color: white; }
.lunch { background: #f9e79f; font-weight: bold; }
</style>
</head>
<body>
<h1>Class Timetable</h1>
<table>
<tr><th>Period</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thurs
day</th><th>Friday</th></tr>
<tr><td>1</td><td>Math</td><td>English</td><td>Physics</td><td>Chemistry</
td><td>Biology</td></tr>
<tr><td>2</td><td>English</td><td>Math</td><td>Computer</td><td>Physics</
td><td>Chemistry</td></tr>
<tr><td>3</td><td>Computer</td><td>Physics</td><td>Math</td><td>English</
td><td>Math</td></tr>
<tr class="lunch"><td colspan="6">Lunch Break</td></tr>
<tr><td>4</td><td>Chemistry</td><td>Computer</td><td>English</td><td>Math</
td><td>Physics</td></tr>
<tr><td>5</td><td>Biology</td><td>Chemistry</td><td>Physics</td><td>Computer<
/td><td>English</td></tr>
</table>
</body>
</html>
Question 10
A software company wants a contact page. Design an HTML form that includes fields for name,
email, subject (dropdown with at least 4 options), message (textarea), and a submit button. Add a
reset button as well. Use proper labels and attributes.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
label { display: block; margin-top: 10px; }
input, select, textarea { padding: 6px; width: 250px; margin-top: 4px; }
</style>
</head>
<body>
<h1>Contact Us</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="subject">Subject:</label>
<select id="subject" name="subject">
<option>General Inquiry</option>
<option>Technical Support</option>
<option>Sales</option>
<option>Feedback</option>
</select>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5"></textarea>
<br><br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
Question 11
A university wants to publish its faculty profiles. Create an HTML page that includes a page heading,
and at least three faculty members each displayed with their photo (<img>), name (<h3>), and
designation (<p>). Arrange them using basic HTML structure.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Faculty Profiles</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.faculty { display: inline-block; width: 180px; text-align: center; margin:
10px; }
.faculty img { width: 120px; height: 120px; border-radius: 50%; }
</style>
</head>
<body>
<h1>Our Faculty</h1>
<div class="faculty">
<img src="[Link]" alt="Dr. Ahmed Khan">
<h3>Dr. Ahmed Khan</h3>
<p>Professor, Computer Science</p>
</div>
<div class="faculty">
<img src="[Link]" alt="Dr. Sara Ali">
<h3>Dr. Sara Ali</h3>
<p>Associate Professor, Mathematics</p>
</div>
<div class="faculty">
<img src="[Link]" alt="Dr. Bilal Ahmad">
<h3>Dr. Bilal Ahmad</h3>
<p>Assistant Professor, Physics</p>
</div>
</body>
</html>
Question 12
A travel blog wants to share destination reviews. Create an HTML page that includes a main heading,
two destination sub-headings, a paragraph and an image for each destination, and a "Read More"
hyperlink under each that opens in a new tab. Use alt attributes on all images.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Travel Blog</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
h1 { color: #117a65; }
img { width: 300px; display: block; margin: 8px 0; }
</style>
</head>
<body>
<h1>Top Travel Destinations</h1>
<h2>Hunza Valley</h2>
<img src="[Link]" alt="Hunza Valley mountains">
<p>Hunza Valley offers breathtaking mountain views, rich culture, and warm
hospitality.</p>
<a href="[Link]" target="_blank">Read More</a>
<h2>Maldives</h2>
<img src="[Link]" alt="Maldives beach resort">
<p>The Maldives is famous for its crystal-clear waters and luxurious
overwater villas.</p>
<a href="[Link]" target="_blank">Read More</a>
</body>
</html>
Question 13
A company wants an employee data table. Create an HTML table with headings (Employee ID, Name,
Department, Salary, Joining Date) with at least 5 rows of data. Use <thead>, <tbody>, and <tfoot>
tags. In the footer row, display the total salary.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Employee Data</title>
<style>
table { border-collapse: collapse; width: 100%; font-family: Arial, sans-
serif; }
th, td { border: 1px solid #555; padding: 8px; text-align: left; }
thead { background: #2874a6; color: white; }
tfoot { background: #d5dbdb; font-weight: bold; }
</style>
</head>
<body>
<h1>Employee Records</h1>
<table>
<thead>
<tr><th>Employee
ID</th><th>Name</th><th>Department</th><th>Salary</th><th>Joining
Date</th></tr>
</thead>
<tbody>
<tr><td>E001</td><td>Ali Raza</td><td>Sales</td><td>50000</td><td>2021-
03-15</td></tr>
<tr><td>E002</td><td>Hina Shah</td><td>IT</td><td>75000</td><td>2020-
07-01</td></tr>
<tr><td>E003</td><td>Usman Tariq</td><td>HR</td><td>45000</td><td>2022-
01-10</td></tr>
<tr><td>E004</td><td>Ayesha
Noor</td><td>Finance</td><td>60000</td><td>2019-11-20</td></tr>
<tr><td>E005</td><td>Bilal Aslam</td><td>IT</td><td>80000</td><td>2023-
05-05</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">Total Salary</td><td colspan="2">310000</td></tr>
</tfoot>
</table>
</body>
</html>
Question 14
A movie streaming site wants a signup page. Design an HTML form with fields for username, email,
password, confirm password, country (dropdown with at least 5 countries), and agreement to terms
(checkbox). Include a submit button with proper labels.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Signup - StreamFlix</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
label { display: block; margin-top: 10px; }
input, select { padding: 6px; width: 250px; margin-top: 4px; }
</style>
</head>
<body>
<h1>Create Your StreamFlix Account</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="confirm">Confirm Password:</label>
<input type="password" id="confirm" name="confirm">
<label for="country">Country:</label>
<select id="country" name="country">
<option>Pakistan</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
</select>
<label><input type="checkbox" name="terms"> I agree to the Terms and
Conditions</label>
<br><button type="submit">Sign Up</button>
</form>
</body>
</html>
Question 16
A school wants to create a student report card page. Design an HTML page with the school name as a
heading, student details (name, class, roll number) in a paragraph, and a table showing (Subject, Max
Marks, Obtained Marks, Grade) with at least 6 subjects. Apply basic formatting.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Report Card</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
table { border-collapse: collapse; width: 100%; margin-top: 10px; }
th, td { border: 1px solid #444; padding: 8px; text-align: center; }
th { background: #1a5276; color: white; }
</style>
</head>
<body>
<h1>Greenfield High School</h1>
<p><b>Name:</b> Zainab Malik | <b>Class:</b> 10th |
<b>Roll No:</b> 22</p>
<table>
<tr><th>Subject</th><th>Max Marks</th><th>Obtained
Marks</th><th>Grade</th></tr>
<tr><td>Math</td><td>100</td><td>92</td><td>A+</td></tr>
<tr><td>English</td><td>100</td><td>85</td><td>A</td></tr>
<tr><td>Physics</td><td>100</td><td>88</td><td>A</td></tr>
<tr><td>Chemistry</td><td>100</td><td>78</td><td>B+</td></tr>
<tr><td>Biology</td><td>100</td><td>90</td><td>A+</td></tr>
<tr><td>Computer Science</td><td>100</td><td>95</td><td>A+</td></tr>
</table>
</body>
</html>
Question 17
A hospital wants to display its departments online. Create an HTML page that includes a main
heading "City Hospital", a paragraph about the hospital's services, and an ordered list of at least four
departments. Use proper semantic tags.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>City Hospital</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
header h1 { color: #c0392b; }
ol { line-height: 1.8; }
</style>
</head>
<body>
<header>
<h1>City Hospital</h1>
</header>
<main>
<p>City Hospital provides quality healthcare services with modern
facilities and experienced doctors available 24/7.</p>
<h2>Our Departments</h2>
<ol>
<li>Cardiology</li>
<li>Neurology</li>
<li>Pediatrics</li>
<li>Orthopedics</li>
</ol>
</main>
</body>
</html>
Question 18
A tech blog wants a newsletter subscription form. Design an HTML form that includes fields for first
name, last name, email, preferred topics (checkboxes: Technology, AI, Gaming, Science, Business),
subscription frequency (radio buttons: Daily, Weekly, Monthly), and a subscribe button with proper
labels.
Solution (HTML + Internal CSS):
<!DOCTYPE html>
<html>
<head>
<title>Newsletter Subscription</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
label { display: block; margin-top: 8px; }
input[type=text], input[type=email] { padding: 6px; width: 250px; }
</style>
</head>
<body>
<h1>Subscribe to Our Newsletter</h1>
<form>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<p>Preferred Topics:</p>
<label><input type="checkbox" name="topics" value="Technology">
Technology</label>
<label><input type="checkbox" name="topics" value="AI"> AI</label>
<label><input type="checkbox" name="topics" value="Gaming">
Gaming</label>
<label><input type="checkbox" name="topics" value="Science">
Science</label>
<label><input type="checkbox" name="topics" value="Business">
Business</label>
<p>Subscription Frequency:</p>
<label><input type="radio" name="frequency" value="Daily"> Daily</label>
<label><input type="radio" name="frequency" value="Weekly">
Weekly</label>
<label><input type="radio" name="frequency" value="Monthly">
Monthly</label>
<br><button type="submit">Subscribe</button>
</form>
</body>
</html>