Class 10 Computer Science (CBSE 2025–26)
Practical Manual: HTML and CSS
Prepared by: Student of Class X
1. Create a basic HTML webpage
Aim: Create a simple webpage showing your name, class, and school name.
Code:
<!DOCTYPE html>
<html>
<head><title>My First Webpage</title></head>
<body>
<h1>My Name is Kirti Sihamar</h1>
<p>Class 10, ABC Public School</p>
</body>
</html>
Output: Displays your name, class, and school name.
2. Use of Heading Tags
Aim: Create a webpage using all six heading tags (h1 to h6).
Code:
<!DOCTYPE html>
<html>
<head><title>Headings Example</title></head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading 1</h2>
<h3>Sub Heading 2</h3>
<h4>Sub Heading 3</h4>
<h5>Sub Heading 4</h5>
<h6>Sub Heading 5</h6>
</body>
</html>
Output: Displays text in decreasing font sizes using heading tags.
3. Create an Ordered and Unordered List
Aim: Design a webpage showing your favorite subjects in ordered and unordered lists.
Code:
<!DOCTYPE html>
<html>
<head><title>Lists Example</title></head>
<body>
<h2>My Favorite Subjects</h2>
<ol>
<li>Mathematics</li>
<li>Science</li>
<li>Computer</li>
</ol>
<ul>
<li>English</li>
<li>Social Studies</li>
</ul>
</body>
</html>
Output: Shows ordered and unordered lists of subjects.
4. Insert an Image and a Link
Aim: Display an image and a hyperlink to a website.
Code:
<!DOCTYPE html>
<html>
<head><title>Image and Link</title></head>
<body>
<h2>My Favorite Website</h2>
<img src='nature.jpg' width='200'>
<p>Visit <a href='https://www.cbse.gov.in' target='_blank'>CBSE Official Website</a></p>
</body>
</html>
Output: Shows an image and a working hyperlink.
5. Create a Table
Aim: Design a webpage to show student marks using a table.
Code:
<!DOCTYPE html>
<html>
<head><title>Student Marks</title></head>
<body>
<h2>Student Marks Table</h2>
<table border='1'>
<tr><th>Subject</th><th>Marks</th></tr>
<tr><td>Math</td><td>90</td></tr>
<tr><td>Science</td><td>88</td></tr>
<tr><td>English</td><td>85</td></tr>
</table>
</body>
</html>
Output: Displays a table with student marks.
6. Inline CSS Example
Aim: Use inline CSS to change text color and background color.
Code:
<!DOCTYPE html>
<html>
<head><title>Inline CSS</title></head>
<body style='background-color:lightyellow;'>
<h2 style='color:blue;'>Welcome to My Page</h2>
<p style='color:green;'>This paragraph is styled using inline CSS.</p>
</body>
</html>
Output: Applies inline CSS to style elements.
7. Internal CSS Example
Aim: Apply internal CSS to change the font and background color.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {background-color: lavender;}
h2 {color: navy; font-family: Arial;}
p {color: maroon;}
</style>
</head>
<body>
<h2>Internal CSS Example</h2>
<p>This page uses internal CSS.</p>
</body>
</html>
Output: Applies internal CSS styles to webpage elements.
8. External CSS Example
Aim: Link an external CSS file to style a webpage.
Code:
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<h2>External CSS Example</h2>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>
Output: Connects webpage with external CSS file.
9. CSS Border and Padding
Aim: Use CSS to create a bordered box with padding.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Box Model Example</title>
<style>
div {
border: 2px solid blue;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<h2>CSS Box Model</h2>
<div>This box has border and padding.</div>
</body>
</html>
Output: Shows a blue-bordered box with padding.
10. Create a Simple Web Layout
Aim: Design a webpage using header, nav, section, and footer.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Layout</title>
<style>
header, footer {background-color: lightblue; text-align: center; padding: 10px;}
nav {background-color: lightgray; padding: 10px;}
section {margin: 10px;}
</style>
</head>
<body>
<header><h1>My Website</h1></header>
<nav>Home | About | Contact</nav>
<section>
<h2>Welcome</h2>
<p>This is a simple webpage layout using HTML and CSS.</p>
</section>
<footer>© 2025 My Website</footer>
</body>
</html>
Output: Displays a complete simple webpage layout.
