Scribd
Upload
39 views6 pages

HTML & CSS Projects for Class 9

The document outlines five HTML and CSS mini projects designed for Class 9 students, including 'My First Web Page', 'Colorful Text Page', 'Simple Profile Card', 'Web Page with Background Image', and 'Navigation Bar'. Each project includes basic HTML structure and corresponding CSS styles to enhance the design. These projects aim to introduce students to web development concepts and practices.

Uploaded by

Bishal Bhandari
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views6 pages

HTML & CSS Projects for Class 9

The document outlines five HTML and CSS mini projects designed for Class 9 students, including 'My First Web Page', 'Colorful Text Page', 'Simple Profile Card', 'Web Page with Background Image', and 'Navigation Bar'. Each project includes basic HTML structure and corresponding CSS styles to enhance the design. These projects aim to introduce students to web development concepts and practices.

Uploaded by

Bishal Bhandari
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML & CSS Mini Projects for Class 9 Students

1. My First Web Page


HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>

CSS Code:
No CSS used in this basic project.
2. Colorful Text Page
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Colorful Text</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Welcome!</h1>
<p>This text is colorful.</p>
</body>
</html>

CSS Code:
body {
background-color: lightyellow;
}
h1 {
color: darkblue;
}
p {
color: green;
}
3. Simple Profile Card
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Profile Card</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div class="card">
<h2>Jane Doe</h2>
<p>Student at XYZ School</p>
</div>
</body>
</html>

CSS Code:
.card {
border: 1px solid black;
padding: 10px;
width: 200px;
background-color: lightblue;
}
4. Web Page with Background Image
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Background Image</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Nature is Beautiful</h1>
</body>
</html>

CSS Code:
body {
background-image: url('[Link]');
background-size: cover;
color: white;
}
5. Navigation Bar
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Navigation</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>

CSS Code:
.navbar {
background-color: #333;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
display: inline-block;
}

You might also like