THADOMAL SHAHANI ENGINEERING
COLLEGE
DEPARTMENT OF INFORMATION TECHNOLOGY
Roll no:S13-58
[Link] : LO1
Aim: To design and develop a simple static website using HTML for structure, CSS for styling,
and JavaScript for interactivity.
Theory: A static website consists of fixed content delivered to the user exactly as stored. It
does not interact with databases or server-side logic. It is built using:
HTML (HyperText Markup Language): Provides the structure of web pages using
elements like headings, paragraphs, links, and buttons.
CSS (Cascading Style Sheets): Adds styling and layout features like colors, fonts,
and spacing to HTML elements.
JavaScript: Adds client-side interactivity, such as event handling (e.g., responding to
a button click).
Static websites are lightweight, fast-loading, and ideal for small projects, portfolios, or landing
pages.
Program :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Static Website</title>
<!-- CSS Styling -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
header {
background-color: #007acc;
color: white;
padding: 20px;
text-align:
center;
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content:
center; margin-top:
10px;
}
nav li {
margin: 0 15px;
}
nav a {
color: white;
text-decoration:
none; font-weight:
bold;
}
nav a:hover {
text-decoration: underline;
main {
padding: 20px;
text-align:
center;
}
button {
padding: 10px
20px; font-size:
16px; cursor:
pointer;
background-color: #007acc;
color: white;
border: none;
border-radius: 5px;
margin-top: 15px;
}
button:hover {
background-color: #005f99;
footer {
background-color:
#eee; text-align: center;
padding: 15px;
margin-top: 40px;
</style>
</head>
<body>
<header>
<h1>Welcome to My Static Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Hello, Dear Student!</h2>
<p>This is a sample static website built using HTML, CSS, and JavaScript.</p>
<button onclick="showMessage()">Click Me</button>
<p id="message"></p>
</section>
</main>
<footer>
<p>© 2025 FullStackJavaSyllusSetter</p>
</footer>
<!-- JavaScript -->
<script>
function showMessage() {
const message = [Link]("message"); [Link] =
" .·.‘ª ~ ~ ˙ ˛ 3T h a n k you for clicking! Enjoy browsing!";
[Link] = "green";
// Optional: Clear message after 3 seconds
setTimeout(() => {
[Link] = "";
}, 3000);
</script>
</body>
</html>
Output:
Conclusion: A static website was successfully created using HTML, CSS, and JavaScript. The
website includes a navigation bar, styled content, and a JavaScript function to display a message
when a button is clicked. This demonstrates how front-end technologies work together to build
interactive web pages without using a database or server-side scripting.