Experiment No 5
Aim: Program to create a static website using HTML and CSS
Objectives: To create a static website using HTML,CSS and JavaScript
Prerequisites: It is required that students should know the basic HTML, Style sheet, and
Java
Script syntax and methods
Steps to Create Static Pages
Step 1: Firstly, we will create a folder with the project name and create the
HTML(e.g,index.html), CSS (e.g, style.css), JavaScript files, Images folder, and a
separate file for the responsive CSS if required.
Step 2: By using various HTML tags like section, header, meta, title, head, div, I, mg, etc
to structure the web page and include a header, navigation bar, main content area, and a
script tag for our JavaScript file.
Step3: Add some Style using CSS to the HTML code to make our frontend look good.
We'll choose colors and layouts that look modern and inviting. Add style mainly to the
image and beautify the header.
Step4: Add the JavaScript function, like updating the content based on what the user
clicks.
Step5: You can create a navigation system that dynamically loads content based on user
interactions.
Code
HTML: index.html
<!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>
<link rel="stylesheet" href="style.css" />
</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>
<script src="script.js"></script>
</body>
</html>
Style.css
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;
}
main {
padding: 20px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
footer {
background-color: #eee;
text-align: center;
padding: 15px;
margin-top: 40px;
}
Java Script: script.js
function showMessage() {
const message = document.getElementById("message");
message.textContent = "Thank you for clicking! Enjoy browsing ";
}
Output:
Conclusion :
The program demonstrates how HTML provides structure, CSS adds style, and
JavaScript brings interactivity. Together, they create a functional and responsive website,
forming the core of modern web development.
SIGN AND REMARK:
R1 (3 Marks) R2 (5 Marks) R3 (4 Marks) R4 (3 Total (15 Marks)
Marks)
