A Project Report
on
Personal Website Development: “My Website”
Subject
Computer Science
Class – XII
Submitted To:
Vikram Prasad Yadav
Submitted By:
Manish Bista
Shree Shanti Vidyashram Secondary School
Lonla, Lalitpur
September 2023
Acknowledgement
I would like to express my heartiest thanks to my mentor Mr. Vikram Prasad Yadav of Shree
Shanti Vidyaashram Secondary School, Lonla, Lalitpur for his valuable support and guidance
for completion of this Project. In fact, this job was impossible without his guidance.
Besides, I would like to extend my special thanks to our Principal Mr. Hari Dev Yadav and
Vice Principal Dr. Rupendra Joshi, who guided me throughout the year of my study.
Similarly, I would like to thank all of my friends, who have directly and indirectly supported
me to complete this Project.
Thank You.
Sincerely,
Manish Bista
Grade XII
Shree Shanti Vidyaashram Secondary School
Lonla, Lalitpur
About Website
"My Website" describes about myself. Its multiple pages include my interest, friend list,
photo gallery and my contact details.
Tools used: HTML
HTML (Hyper Text Markup Language) is the most basic building block of the Web. It defines
the meaning and structure of web content. Other technologies besides HTML are generally
used to describe a web page's appearance/presentation (CSS) or functionality/behavior
(JavaScript).
HTML code ensures the proper formatting of text and images for our Internet browser.
Without HTML, a browser would not know how to display text as elements, load images, or
other elements. HTML also provides a basic structure of the page, upon which Cascading
Style Sheets are overlaid to change its appearance.
Syntax of HTML
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
All tags are opened as < > and closed as </ >
Tags Used In This Project
Anchor (Linking Tag)
<a> </a>
<h1> </h1>
<h3> </h3>
<p> </p>
<img>
<br>
Style Sheet
Website Design/ formatting is done with the help of style sheet
HTML Codes
About Myself
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class="navbar">
<a href="index.html">Home</a>
<a href="friends.html">My Friends</a>
<a href="gallery.html">Gallery</a>
<a href="education.html">Education</a>
<a href="contactme.html">Contact Me</a>
</div>
<div class="content">
<h1 align="center">About Manish Bista</h1>
<img src= "Manish.jpg"height="800" width="1400" align="center">
<p title="About Manish Bista"> I am <b>Manish Bista</b> I am a permanent resident
of Lalitpur Metropolitan City, Ward No. - 26, Dholahity. Recently, i am studing
<b>Computer Science</b> in Shree Shanti Vidyashram Secondary School. In addition to
me, i am taking Computer Science major with additional subjects like Economics,
Instructional Pedagogy, and other compulsory subjects like English, Nepali and Social
Studies and Life Skill Education.
</p>
<h3>My Interest</h3>
<p title="My Interest"> Talking about me, i like to listen music and love to travel to
different rural areas by hiking and related means. Moreover, i like playing basketball and
table tennis as sport and trekking and day hiking as recreational means.</p>
<footer>
<p>Copy Right 2023 Manish Bista</p>
</footer>
</div>
</body>
</html>
My Friends
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: ;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class="navbar">
<a href="index.html">Home</a>
<a href="friends.html">My Friends</a>
<a href="education.html">Education</a>
<a href="gallery.html">Gallery</a>
<a href="contactme.html">Contact Me</a>
</div>
<h1>My Friends and Their Details</h1>
<table>
<tr>
<td>Gaurab Mahat</td>
<td>29</td>
<td>Finland</td>
</tr>
<tr>
<td>Brenden</td>
<td>42</td>
<td>USA</td>
</tr>
<tr>
<td>Mohammad Rehan Nadaf</td>
<td>19</td>
<td>Patan</td>
</tr>
</table>
</body>
</html>
Education
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class="navbar">
<a href="index.html">Home</a>
<a href="friends.html">My Friends</a>
<a href="education.html">Education</a>
<a href="gallery.html">Gallery</a>
<a href="contactme.html">Contact Me</a>
</div>
<h1>Educational Information</h1>
<table>
<td>SLC</td>
<td>Lalitpur Academy</td>
<td>63.60%</td>
</tr>
<tr>
</tr>
</table>
<table>
<td>High School</td>
<td>Shree Shanti VIdyashram Secondary Schoo</td>
<td>Running</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Gallery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Photo Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: lightgrey;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.gallery img:hover {
width: 100%;
height: auto;
display: block;
color: black;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class="navbar">
<a href="index.html">Home</a>
<a href="friends.html">My Friends</a>
<a href="education.html">Education</a>
<a href="gallery.html">Gallery</a>
<a href="contactme.html">Contact Me</a>
</div>
<div class="gallery">
<img src="Manish.jpg" alt="Image 1" height="250px" width="250px">
<img src="Manish1.jpg" alt="Image 2" height="250px" width="250px">
<img src="Manish2.jpg" alt="Image 3" height="250px" width="250px">
<img src="Manish3.jpg" alt="Image 1" height="250px" width="250px">
<img src="Manish4.jpg" alt="Image 2" height="250px" width="250px">
</div>
<br>
<br>
<div class="gallery">
<img src="Manish5.jpg" alt="Image 1" height="250px" width="250px">
<img src="Manish6.jpg" alt="Image 2" height="250px" width="250px">
<img src="Manish7.jpeg" alt="Image 3" height="250px" width="250px">
<img src="Manish8.jpg" alt="Image 1" height="250px" width="250px">
<img src="Manish9.jpg" alt="Image 2" height="250px" width="250px">
</div>
</body>
</html>
Contact Me
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: lightblue;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.contact-form {
display: flex;
flex-direction: column;
}
.contact-form input, .contact-form textarea {
margin-bottom: 10px;
padding: 10px;
}
.contact-form button {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
cursor: pointer;
}
.contact-form button:hover {
background-color: #2980b9;
}
.details{
font-family: arrial ,sans-serif;
padding: 20px;
width: 300px;
margin: 0 auto;
background-color: #f9f9f9;
}
.details p { margin: 5px 0; }
.details h2{ color: #333; }
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class="navbar">
<a href="index.html">Home</a>
<a href="friends.html">My Friends</a>
<a href="education.html">Education</a>
<a href="gallery.html">Gallery</a>
<a href="contactme.html">Contact Me</a>
</div>
<div class="details">
<h2>My contact Details </h2>
<p><strong>Name:</strong> Manish Bista</p>
<p><strong>Age:</strong> 29</p>
<p><strong>Gender:</strong> Male </p>
<p><strong>Address:</strong> LMC - 26, Dholahity </p>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone No:</strong> 9841927161</p>
</div>
<div class="container">
<h1>Contact Me</h1>
<div class="contact-form">
<input type="text" placeholder="Name">
<input type="text" placeholder="Age">
<input type="text" placeholder="Gender">
<input type="email" placeholder="Email">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</div>
</div>
</body>
</html>
Web Pages
