HTML & CSS Practical Questions
1. Design a webpage which has student’s biodata with proper
formatting and having student name as title.
<!DOCTYPE html>
<html>
<head>
<title>Saksham Sharma</title>
<style>
body{
font-family: Arial, sans-serif;
background:#f4f6f8;
.container{
width:600px;
margin:auto;
margin-top:40px;
padding:20px;
background:white;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
h1{
text-align:center;
color:#2c3e50;
table{
width:100%;
border-collapse:collapse;
td{
padding:8px;
border-bottom:1px solid #ddd;
.label{
font-weight:bold;
width:40%;
</style>
</head>
<body>
<div class="container">
<h1>Student Biodata</h1>
<table>
<tr><td class="label">Name</td><td>Saksham Sharma</td></tr>
<tr><td class="label">Course</td><td>BCA</td></tr>
<tr><td class="label">Semester</td><td>IV</td></tr>
<tr><td class="label">College</td><td>ABC College</td></tr>
<tr><td class="label">Email</td><td>saksham@[Link]</td></tr>
<tr><td class="label">Phone</td><td>1234567890</td></tr>
<tr><td class="label">Address</td><td>Delhi, India</td></tr>
<tr><td class="label">Skills</td><td>HTML, CSS, JavaScript, C, Java</td></tr>
</table>
</div>
</body>
</html>
OUTPUT :
2. Format a given article using headings, bold, italics, underline, and
blockquote tags.
<!DOCTYPE html>
<html>
<head>
<title>Formatted Article</title>
<style>
body{
font-family: Arial, sans-serif;
margin:40px;
background:#f5f5f5;
.article{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 0 8px rgba(0,0,0,0.2);
h1{
color:#2c3e50;
blockquote{
border-left:4px solid #3498db;
padding-left:10px;
color:#555;
font-style:italic;
background:#eef6ff;
</style>
</head>
<body>
<div class="article">
<h1>The Importance of Technology in Education</h1>
<h3>Introduction</h3>
<p>
Technology has become an essential part of modern education. It helps students
access information quickly and improves the overall learning experience.
</p>
<h3>Key Benefits</h3>
<p>
Using <b>digital tools</b> in classrooms allows students to learn faster and more
effectively. Online resources make learning more <i>interactive</i> and engaging.
Teachers can also <u>simplify complex concepts</u> using multimedia and visual aids.
</p>
<h3>Expert Opinion</h3>
<blockquote>
“Technology will not replace teachers, but teachers who use technology will
replace those who do not.”
</blockquote>
<p>
In conclusion, technology plays a crucial role in shaping the future of education
and making learning more accessible for everyone.
</p>
</div>
</body>
</html>
OUTPUT:
3. Design a website for PNG jewellers, having images of different
types of jewelleries which are linked with the pages giving details
about the items.
[Link]:
<!DOCTYPE html>
<html>
<head>
<title>PNG Jewellers</title>
<style>
body{
font-family:Arial;
background:#f4f4f4;
text-align:center;
h1{
color:#8B0000;
.gallery{
display:flex;
justify-content:center;
gap:30px;
margin-top:30px;
.item{
background:white;
padding:15px;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
img{
width:200px;
height:200px;
border-radius:6px;
}
a{
text-decoration:none;
color:black;
font-weight:bold;
</style>
</head>
<body>
<h1>PNG Jewellers</h1>
<h3>Exclusive Jewellery Collection</h3>
<div class="gallery">
<div class="item">
<a href="[Link]">
<img src="[Link]">
<p>Gold Ring</p>
</a>
</div>
<div class="item">
<a href="[Link]">
<img src="[Link]">
<p>Diamond Necklace</p>
</a>
</div>
<div class="item">
<a href="[Link]">
<img src="[Link]">
<p>Designer Earrings</p>
</a>
</div>
</div>
</body>
[Link] :
<!DOCTYPE html>
<html>
<head>
<title>Gold Ring - PNG Jewellers</title>
<style>
body{
font-family:Arial;
text-align:center;
background:#f9f9f9;
.container{
background:white;
width:400px;
margin:auto;
margin-top:50px;
padding:20px;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
img{
width:250px;
a{
text-decoration:none;
color:#8B0000;
font-weight:bold;
</style>
</head>
<body>
<div class="container">
<h2>Gold Ring</h2>
<img src="[Link]">
<p><b>Material:</b> 22K Gold</p>
<p><b>Weight:</b> 5 grams</p>
<p><b>Price:</b> ₹35,000</p>
<p>Elegant gold ring perfect for special occasions.</p>
<a href="[Link]">Back to Collection</a>
</div>
</body>
</html>
OUTPUT Home Page([Link]):
OUTPUT Jewellery detail page ([Link]):
4. Design a website for the college which lists all the faculties
(ordered lists), courses (definition lists) every course explains details
(fees, duration, intake capacity) as unordered list.
<!DOCTYPE html>
<html>
<head>
<title>ABC College</title>
</head>
<body>
<h1 align="center">ABC College</h1>
<h2>List of Faculties</h2>
<ol>
<li>Faculty of Computer Science</li>
<li>Faculty of Commerce</li>
<li>Faculty of Management</li>
<li>Faculty of Arts</li>
</ol>
<h2>Courses Offered</h2>
<dl>
<dt><b>BCA (Bachelor of Computer Applications)</b></dt>
<dd>
<ul>
<li>Fees: ₹60,000 per year</li>
<li>Duration: 3 Years</li>
<li>Intake Capacity: 60 Students</li>
</ul>
</dd>
<dt><b>BBA (Bachelor of Business Administration)</b></dt>
<dd>
<ul>
<li>Fees: ₹55,000 per year</li>
<li>Duration: 3 Years</li>
<li>Intake Capacity: 50 Students</li>
</ul>
</dd>
<dt><b>[Link] (Bachelor of Commerce)</b></dt>
<dd>
<ul>
<li>Fees: ₹40,000 per year</li>
<li>Duration: 3 Years</li>
<li>Intake Capacity: 80 Students</li>
</ul>
</dd>
</dl>
</body>
</html>
OUTPUT:
Q5 Design a web page to display the following output:
List of subjects
o Semester III
C++
[Link]
o Semester III
Java
Industrial Projects
Internet Programming
o HTML
o VBScript
o Java Script
<!DOCTYPE html>
<html>
<head>
<title>List of Subjects</title>
</head>
<body bgcolor="lightyellow">
<center>
<font face="Arial" color="darkblue" size="6"><b>List of Subjects</b></font>
</center>
<br>
<font face="Verdana" size="4">
<ul>
<li><b>Semester III</b>
<ul type="square">
<li><font color="darkgreen">C++</font></li>
<li><font color="darkgreen">[Link]</font></li>
</ul>
</li>
<br>
<li><b>Semester III</b>
<ul type="square">
<li><font color="purple">Java</font></li>
<li><font color="purple">Industrial Projects</font></li>
</ul>
</li>
<br>
<li><b>Internet Programming</b>
<ul type="circle">
<li><font color="brown">HTML</font></li>
<li><font color="brown">VBScript</font></li>
<li><font color="brown">Java Script</font></li>
</ul>
</li>
</ul>
</font>
</body>
</html>
OUTPUT:
Q6. Create a restaurant menu table with item name, price, category,
and availability.
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body bgcolor="lightyellow">
<center>
<font face="Arial" size="6" color="darkred"><b>Restaurant Menu</b></font>
</center>
<br>
<center>
<table border="2" cellpadding="10" cellspacing="0" width="60%" bgcolor="white">
<tr bgcolor="orange">
<th>Item Name</th>
<th>Category</th>
<th>Price</th>
<th>Availability</th>
</tr>
<tr align="center">
<td>Paneer Butter Masala</td>
<td>Main Course</td>
<td>₹250</td>
<td>Available</td>
</tr>
<tr align="center">
<td>Veg Biryani</td>
<td>Main Course</td>
<td>₹220</td>
<td>Available</td>
</tr>
<tr align="center">
<td>Masala Dosa</td>
<td>Breakfast</td>
<td>₹120</td>
<td>Available</td>
</tr>
<tr align="center">
<td>Chocolate Cake</td>
<td>Dessert</td>
<td>₹150</td>
<td>Out of Stock</td>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
Q7. Design a student marksheet using rowspan, colspan, cellpadding,
and cellspacing.
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body bgcolor="lightyellow">
<center>
<font face="Arial" size="6" color="darkred"><b>Restaurant Menu</b></font>
</center>
<br>
<center>
<table border="2" cellpadding="10" cellspacing="0" width="60%" bgcolor="white">
<tr bgcolor="orange">
<th>Item Name</th>
<th>Category</th>
<th>Price</th>
<th>Availability</th>
</tr>
<tr align="center">
<td>Paneer Butter Masala</td>
<td>Main Course</td>
<td>₹250</td>
<td>Available</td>
</tr>
<tr align="center">
<td>Veg Biryani</td>
<td>Main Course</td>
<td>₹220</td>
<td>Available</td>
</tr>
<tr align="center">
<td>Masala Dosa</td>
<td>Breakfast</td>
<td>₹120</td>
<td>Available</td>
</tr>
<tr align="center">
<td>Chocolate Cake</td>
<td>Dessert</td>
<td>₹150</td>
<td>Out of Stock</td>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
Q8. Create a weekly timetable with subject icons/images inside table
cells.
<!DOCTYPE html>
<html>
<head>
<title>Weekly Timetable</title>
</head>
<body bgcolor="lightyellow">
<center>
<font size="6" color="darkblue"><b>Weekly Timetable</b></font>
</center>
<br>
<center>
<table border="2" cellpadding="10" cellspacing="3" width="80%" bgcolor="white">
<tr bgcolor="lightgray">
<th>Day</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-1</th>
</tr>
<tr align="center">
<td><b>Monday</b></td>
<td><img src="[Link]" width="30"><br>Java</td>
<td><img src="[Link]" width="30"><br>HTML</td>
<td><img src="[Link]" width="30"><br>C++</td>
<td><img src="[Link]" width="30"><br>DBMS</td>
</tr>
<tr align="center">
<td><b>Tuesday</b></td>
<td><img src="[Link]" width="30"><br>HTML</td>
<td><img src="[Link]" width="30"><br>C++</td>
<td><img src="[Link]" width="30"><br>Java</td>
<td><img src="[Link]" width="30"><br>Project</td>
</tr>
<tr align="center">
<td><b>Wednesday</b></td>
<td><img src="[Link]" width="30"><br>DBMS</td>
<td><img src="[Link]" width="30"><br>Java</td>
<td><img src="[Link]" width="30"><br>HTML</td>
<td><img src="[Link]" width="30"><br>C++</td>
</tr>
<tr align="center">
<td><b>Thursday</b></td>
<td><img src="[Link]" width="30"><br>C++</td>
<td><img src="[Link]" width="30"><br>DBMS</td>
<td><img src="[Link]" width="30"><br>Project</td>
<td><img src="[Link]" width="30"><br>HTML</td>
</tr>
<tr align="center">
<td><b>Friday</b></td>
<td><img src="[Link]" width="30"><br>Java</td>
<td><img src="[Link]" width="30"><br>Project</td>
<td><img src="[Link]" width="30"><br>DBMS</td>
<td><img src="[Link]" width="30"><br>HTML</td>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
9. Design a two-frame layout where one frame lists help topics and
the other displays selected content using named frames.
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Help System</title>
</head>
<frameset cols="30%,70%">
<frame src="[Link]" name="topics">
<frame src="[Link]" name="content">
</frameset>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Help Topics</title>
</head>
<body bgcolor="biege">
<h3>Help Topics</h3>
<ul>
<li><a
href="[Link]"
target="content">HTML<
/a></li>
<li><a href="[Link]" target="content">CSS</a></li>
<li><a href="[Link]" target="content">JavaScript</a></li>
</ul>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body bgcolor="white">
<h2>Welcome to Help Section</h2>
<p>Select a topic from the left panel.</p>
</body>
</html>
OUTPUT:
Q10. Create a page with internal, external, email, and image
hyperlinks.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body bgcolor="lightyellow">
<center>
<font size="6" color="darkblue"><b>Hyperlink Demonstration</b></font>
</center>
<br>
<h3>External Link</h3>
<a href="[Link] Google</a>
<br><br>
<h3>Email Link</h3>
<a href="[Link] Email</a>
<br><br>
<h3>Image Hyperlink</h3>
<a href="[Link]
<img src="[Link]" width="120" height="120">
</a>
<br><br>
<h3>Internal Link</h3>
<a href="#section2">Go to Section 2</a>
<br><br><br>
<h2 id="section2">Section 2</h2>
<p>This section is reached using an internal hyperlink.</p>
</body>
</html>
OUTPUT:
Q11. Convert a <div>-based layout into semantic HTML5 structure
using <header>, <nav>, <section>, <article>, <footer>.
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML5 Layout</title>
</head>
<body bgcolor="lightcyan">
<header>
<center>
<font size="6" color="darkblue"><b>My Website</b></font>
</center>
</header>
<nav>
<center>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Courses</a> |
<a href="#">Contact</a>
</center>
</nav>
<section>
<article>
<h2>Web Development</h2>
<p>Web development involves creating websites using HTML, CSS and JavaScript.</p>
</article>
<article>
<h2>Programming</h2>
<p>Programming languages such as C, Java and Python are used to build software.</p>
</article>
</section>
<footer>
<center>
<p>© 2026 My Website</p>
</center>
</footer>
</body>
</html>
OUTPUT:
Q12. Embed audio and video with controls and fallback message.
<!DOCTYPE html>
<html>
<head>
<title>Audio and Video Example</title>
</head>
<body bgcolor="lightyellow">
<center>
<font size="6" color="darkblue"><b>Audio and Video Demo</b></font>
</center>
<h3>Audio Player</h3>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br><br>
<h3>Video Player</h3>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>
OUTPUT:
13. Apply inline, internal, and external CSS to the same page and
compare results.
[Link]:
<!DOCTYPE html>
<html>
<head>
<title>CSS Types Example</title>
<style>
/* Internal CSS */
.internal{
color:blue;
font-size:20px;
font-family:Arial;
</style>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>CSS Demonstration</h2>
<p style="color:red;font-size:20px;">This paragraph uses Inline CSS.</p>
<p class="internal">This paragraph uses Internal CSS.</p>
<p class="external">This paragraph uses External CSS.</p>
</body>
</html>
[Link]:
.external{
color:green;
font-size:20px;
font-family:Verdana;
OUTPUT:
Q14. Design a Style sheet to give following effects:
The first letter of the paragraph should have 150% font size.
The first line of the paragraph should have purple as background color
and white as the fore color.
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Elements</title>
<style>
p::first-letter{
font-size:150%;
p::first-line{
background-color:purple;
color:white;
</style>
</head>
<body>
<h2>CSS First Letter and First Line Example</h2>
<p>
Web development is the process of creating websites and web applications.
It includes designing the structure of web pages using HTML, styling them
using CSS, and adding functionality with JavaScript.
</p>
</body>
</html>
OUTPUT:
Q15. Change theme colors for light/dark mode using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Light and Dark Theme</title>
<style>
.light{
background-color:white;
color:black;
font-family:Arial;
padding:20px;
.dark{
background-color:black;
color:white;
font-family:Arial;
padding:20px;
}
</style>
</head>
<body>
<h2>Light Theme</h2>
<div class="light">
<p>This section demonstrates the light theme with a white background and black text.</p>
</div>
<br>
<h2>Dark Theme</h2>
<div class="dark">
<p>This section demonstrates the dark theme with a black background and white text.</p>
</div>
</body>
</html>
OUTPUT:
DARK MODE:
LIGHT MODE:
16. Design a product card with borders, shadows, and rounded
corners.
<!DOCTYPE html>
<html>
<head>
<title>Product Card</title>
<style>
body{font-family:Arial;background:#f2f2f2;text-align:center}
.card{
width:250px;
border:1px solid #ccc;
border-radius:10px;
box-shadow:0 4px 8px rgba(0,0,0,0.2);
padding:15px;
margin:auto;
background:white;
.card img{
width:100%;
border-radius:8px;
.price{
color:green;
font-weight:bold;
button{
background:orange;
border:none;
padding:8px 12px;
border-radius:5px;
cursor:pointer;
</style>
</head>
<body>
<h2>Product Card</h2>
<div class="card">
<img src="[Link]">
<h3>Wireless Headphones</h3>
<p class="price">₹2999</p>
<p>High quality sound with noise cancellation.</p>
<button>Buy Now</button>
</div>
</body>
</html>
OUTPUT:
Q17. Design a website for a college showing features of the
university, college and list of different courses running in the institute.
Course names have links with the pages having details of the courses
having similar design using stylesheets.
[Link] (main page)
<!DOCTYPE html>
<html>
<head>
<title>ABC College</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>ABC College</h1>
<p>Affiliated to XYZ University</p>
</header>
<section>
<h2>Features of Our College</h2>
<ul>
<li>Modern computer labs</li>
<li>Experienced faculty</li>
<li>Library with digital resources</li>
<li>Industry focused training</li>
</ul>
<h2>Courses Offered</h2>
<ul>
<li><a href="[Link]">BCA - Bachelor of Computer Applications</a></li>
<li><a href="[Link]">BBA - Bachelor of Business Administration</a></li>
<li><a href="[Link]">[Link] - Bachelor of Commerce</a></li>
</ul>
</section>
<footer>
<p>© 2026 ABC College</p>
</footer>
</body>
</html>
[Link] (course detail page)
<!DOCTYPE html>
<html>
<head>
<title>BCA Course</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>BCA Course Details</h1>
</header>
<section>
<h2>Course Information</h2>
<ul>
<li>Duration: 3 Years</li>
<li>Eligibility: 12th Pass</li>
<li>Subjects: Programming, Web Development, Database</li>
<li>Career Options: Software Developer, Web Developer</li>
</ul>
<a href="[Link]">Back to Home</a>
</section>
<footer>
<p>ABC College</p>
</footer>
</body>
</html>
[Link]
body{
font-family:Arial;
margin:20px;
background:#f4f4f4;
header{
background:#2c3e50;
color:white;
padding:15px;
text-align:center;
section{
background:white;
padding:20px;
margin-top:10px;
footer{
text-align:center;
margin-top:10px;
OUTPUT:
MAIN PAGE:
COURSE
PAGE:
Q18. Insert an SVG graphic and draw a rectangle using <canvas>.
<!DOCTYPE html>
<html>
<head>
<title>SVG and Canvas Example</title>
</head>
<body>
<h2>SVG Graphic</h2>
<svg width="200" height="150">
<rect x="20" y="20" width="150" height="80" fill="skyblue" stroke="black"/>
</svg>
<br><br>
<h2>Canvas Rectangle</h2>
<canvas id="myCanvas" width="200" height="150" style="border:1px solid black;"></canvas>
<script>
var c=[Link]("myCanvas");
var ctx=[Link]("2d");
[Link]="orange";
[Link](20,20,150,80);
</script>
</body>
</html>
OUTPUT: