Q No.2.
[10 Marks]
Design a Student Information Webpage using HTML. The page should include the following
elements:
a. Title of the Page: Set the title of the webpage. [1 mark]
b. Header Section: Include the student name and short introduction inside a <header> tag.
[1 mark]
c. Main Content Section: [3 marks]
i. Add a student image ([Link]) using the <img> tag (width: 200).
ii. Write a short paragraph describing the student using <p>.
iii. Create an unordered list <ul> of hobbies including:
Reading books
Playing cricket
Programming
d. Navigation Menu: Create a simple navigation menu using <nav> with links to:
"Form", "Subjects", and "Contact". [1 mark]
e. Subject Marks Table: [4 marks]
Create a table displaying the following data:
Subject Marks Grade
Computer Science 85 A
Mathematics 78 B+
English 82 A
Q No.3. [4 Marks]
a. Write the CSS code to set the background color of the webpage to light blue. [2 marks]
b. Write the CSS code to add a 1px solid black border to table cells (th, td) and set padding to
20px. [2 marks]
Lecturer Muhammad Nasir
Answer
<html>
<head>
<title>Student Info</title>
<style>
body {
background-color: lightblue;
}
table {
border-collapse: collapse;
border: 2px solid black;
}
th, td {
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Ali Ahmad</h1>
<p>Class 10</p>
</header>
<nav>
<a href="[Link]">form</a> |
<a href="#">Subjects</a> |
<a href="#">Contact</a>
</nav>
<img src="[Link]" alt="Student Image" width="200">
<p>
I am a student of Class 10.
I enjoy learning computer science and improving my skills.
</p>
Lecturer Muhammad Nasir
<h3>My Hobbies</h3>
<ul>
<li>Reading books</li>
<li>Playing cricket</li>
<li>Programming</li>
</ul>
<h3>Subject Marks</h3>
<table>
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Grade</th>
</tr>
<tr>
<td>Computer Science</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>Mathematics</td>
<td>78</td>
<td>B+</td>
</tr>
<tr>
<td>English</td>
<td>82</td>
<td>A</td>
</tr>
</table>
</body>
</html>
Lecturer Muhammad Nasir
Q No.2. [10 Marks]
Design a Product Webpage using HTML. The page should include the following elements:
a. Title of the Page: Set the title of the webpage [1 mark]
b. Header Section: Include the store name and a short tagline "Best Products for Everyone"
inside a <header> tag. [1 mark]
c. Main Content Section: [3 marks]
i. Add a product image ([Link]) using the <img> tag.
ii. Write a short paragraph describing the products using <p>.
iii. Create an unordered list <ul> or <ol> of product categories including:
Electronics
Home Appliances
Accessories
d. Navigation Menu: Create a simple navigation menu using <nav> with links to:
"Home", "Products", and "Contact". [1 mark]
e. Product Details Table: [4 marks]
Create a table displaying the following product information:
Product Price Status
Mobile Phone Rs. 45,000 Available
Laptop Rs. 95,000 Out of Stock
Q No.3. [4 Marks]
a. Write the CSS code to set the background color of the webpage to light yellow. [2 marks]
b. Write the CSS code to style the table so that table cells (th, td) have 1px solid black border,
padding of 8px, and centered text. [2 marks]
Lecturer Muhammad Nasir
Answer
<html>
<head>
<title>My Products</title>
<style>
body {
background-color: lightyellow;
}
table {
border: 2px solid black;
border-collapse: collapse
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
header {
text-align: center;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a> |
<a href="#">Products</a> |
<a href="#">Contact</a>
</nav>
<header>
<h1>ABC Store</h1>
<p>Best Products for Everyone</p>
</header>
<img src="[Link]" alt="Product Image">
<p>
Our products are high quality, reliable, and affordable.
We focus on customer satisfaction.
</p>
<h3>Product Categories</h3>
Lecturer Muhammad Nasir
<ul>
<li>Electronics</li>
<li>Home Appliances</li>
<li>Accessories</li>
</ul>
<h3>Product Details</h3>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Status</th>
</tr>
<tr>
<td>Mobile Phone</td>
<td>Rs. 45,000</td>
<td>Available</td>
</tr>
<tr>
<td>Laptop</td>
<td>Rs. 95,000</td>
<td>Out of Stock</td>
</tr>
</table>
</body>
</html>
Lecturer Muhammad Nasir
Q No.1 [10 Marks]
Design a Blog Webpage using HTML
a. Title of the Page: Set the title of the webpage [1 mark]
b. Header Section: Include the website name and a short tagline inside a <header> tag. [1
mark]
c. Main Content Section: [3 marks]
i. Add an image ([Link]) using the <img> tag with width 300.
ii. Write a short paragraph describing the blog using <p>.
iii. Create an unordered list <ul> of categories including:
Technology
Education
Programming
d. Navigation Menu: Create a simple navigation menu using <nav> with links to: "Home",
"Posts", and "Contact". [1 mark]
e. Blog Posts Table: [4 marks]
Create a table displaying the following posts:
Post Title Date Author
HTML Basics 10-01-2026 Ali
CSS Introduction 15-01-2026 Ali
Q No.2 – CSS Styling [4 Marks]
a. Write the CSS code to set the background color of the webpage to light blue and make all
paragraph text font size 16px. [2 marks]
b. Write the CSS code to style the table so that table cells (th, td) have 1px solid black border,
padding of 10px, and the table itself has 2px solid black border with collapsed borders. [2
marks]
Lecturer Muhammad Nasir
Answer.
<html>
<head>
<title>My Blog</title>
<style>
p{
font-size: 16px;
}
nav {
background-color: lightblue;
}
body {
background-color: lightblue;
}
table {
border-collapse: collapse;
border: 2px solid black;
}
th, td {
border: 1px solid black;
padding: 10px;
}
H1 {
color: purple
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a> |
<a href="#">Posts</a> |
<a href="#">Contact</a>
Lecturer Muhammad Nasir
</nav>
<header>
<h1>My Blog</h1>
<p>Learning and Sharing Knowledge</p>
</header>
<img src="[Link]" alt="Blog Image" width="300">
<p>
This blog is about education, technology and learning.
</p>
<ul>
<li>Technology</li>
<li>Education</li>
<li>Programming</li>
</ul>
<table>
<tr>
<th>Post Title</th>
<th>Date</th>
<th>Author</th>
</tr>
<tr>
<td>HTML Basics</td>
<td>10-01-2026</td>
<td>Ali</td>
</tr>
<tr>
<td>CSS Introduction</td>
<td>15-01-2026</td>
<td>Ali</td>
</tr>
</table>
</body>
</html>
Lecturer Muhammad Nasir
Q No.2. [10 Marks]
Design an Entertainment Webpage using HTML. The page should include the following
elements:
a. Title of the Page: Set the title of the webpage [1 mark]
b. Header Section: Include the website name and a short tagline inside a <header> tag. [1
mark]
c. Main Content Section: [3 marks]
i. Add an image ([Link]) using the <img> tag with width 400.
ii. Write a short paragraph describing the website using <p>.
iii. Create an unordered list <ul> of categories including:
Movies
Music
Games
Live Shows
d. Navigation Menu: Create a simple navigation menu using <nav> with links to:
"Home", "Movies", "Music", and "Games". [1 mark]
e. Upcoming Events Table: [4 marks]
Create a table displaying the following events:
Event Name Date Venue
Music Concert 10 Jan 2026 City Hall
Movie Premiere 15 Jan 2026 Main Theater
Gaming Expo 20 Jan 2026 Expo Center
Q No.3. [4 Marks]
a. Write the CSS code to set the background color of the webpage to light green and make all
paragraph text italic. [2 marks]
b. Write the CSS code to style the table so that table cells (th, td) have 1px solid black border,
padding of 8px, and the table itself has 2px solid black border with collapsed borders. [2
marks]
Lecturer Muhammad Nasir
Answer
<html>
<head>
<title>Entertainment Hub</title>
<style>
body {
background-color: lightgreen;
p{
font-style: italic;
}
nav {
background-color: lightblue;
padding: 10px;
}
table {
border: 2px solid black; /* Table border */
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a> |
<a href="#">Movies</a> |
<a href="#">Music</a> |
<a href="#">Games</a>
</nav>
<header>
<h1>Entertainment Hub</h1>
<p>Your one-stop destination for fun</p>
</header>
<img src="[Link]" alt="Entertainment Image" width="400">
Lecturer Muhammad Nasir
<p>
Entertainment Hub brings you the latest movies, music, and games.
Stay updated and enjoy endless fun with us.
</p>
<h3>Categories</h3>
<ul>
<li>Movies</li>
<li>Music</li>
<li>Games</li>
<li>Live Shows</li>
</ul>
<h3>Upcoming Events</h3>
<table>
<tr>
<th>Event Name</th>
<th>Date</th>
<th>Venue</th>
</tr>
<tr>
<td>Music Concert</td>
<td>10 Jan 2026</td>
<td>City Hall</td>
</tr>
<tr>
<td>Movie Premiere</td>
<td>15 Jan 2026</td>
<td>Main Theater</td>
</tr>
<tr>
<td>Gaming Expo</td>
<td>20 Jan 2026</td>
<td>Expo Center</td>
</tr>
</table>
</body>
</html>
Lecturer Muhammad Nasir
Q No.4 [10 Marks]
Design an “About Us” Webpage using HTML
a. Title of the Page: Set the title of the webpage [1 mark]
b. Header Section: Include the company name and a short tagline inside a <header> tag. [1
mark]
c. Main Content Section: [3 marks]
i. Add an image ([Link]) using the <img> tag with width 400.
ii. Write a short paragraph describing the company using <p>.
iii. Create an unordered list <ul> of team members including:
Ali Ahmad – CEO
Fatima Khan – Manager
Usman Ali – Developer
d. Navigation Menu: Create a simple navigation menu using <nav> with links to: "Home",
"About Us", and "Contact". [1 mark]
e. Employee Details Table: [4 marks]
Create a table displaying the following employee details:
Name Position Experience (Years)
Ali Ahmad CEO 10
Fatima Khan Manager 7
Usman Ali Developer 5
Q No.4(a) – CSS Styling [4 Marks]
a. Write the CSS code to set the background color of the webpage to light blue and change the
font to Arial. [2 marks]
b. Write the CSS code to style the table so that table cells (th, td) have 1px solid black border,
padding of 8px, text centered, and the table itself has 2px solid black border with collapsed
borders. [2 marks]
Lecturer Muhammad Nasir
<html>
<head>
<title>About Us</title>
<style>
body {
background-color: lightblue;
font-family: Arial;
}
table {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a> |
<a href="#">About Us</a> |
<a href="#">Contact</a>
</nav>
<header>
<h1>ABC Company</h1>
<p >Our mission is to deliver quality products with excellence.</p>
</header>
<img src="[Link]" alt="Company Image" width="400">
<p>
ABC Company is a leading provider of technology solutions.
We focus on innovation and customer satisfaction.
</p>
<h3>Our Team</h3>
Lecturer Muhammad Nasir
<ul>
<li>Ali Ahmad – CEO</li>
<li>Fatima Khan – Manager</li>
<li>Usman Ali – Developer</li>
</ul>
<h3>Employee Details</h3>
<table>
<tr>
<th>Name</th>
<th>Position</th>
<th>Experience (Years)</th>
</tr>
<tr>
<td>Ali Ahmad</td>
<td>CEO</td>
<td>10</td>
</tr>
<tr>
<td>Fatima Khan</td>
<td>Manager</td>
<td>7</td>
</tr>
<tr>
<td>Usman Ali</td>
<td>Developer</td>
<td>5</td>
</tr>
</table>
</body>
</html>
Lecturer Muhammad Nasir