Here's a simple guide to creating your four HTML pages along with a CSS file. The structure will involve a home page, about page, services page, and a contact page, each linked together.
Step 1: Create Your Folder
- Create a folder on your computer named
My Website
.
Step 2: Create HTML Files
Open a text editor like Notepad and create the following HTML files:
1. index.html
(Home Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Introduction</h2>
<p>This is the home page of my website.</p>
</main>
</body>
</html>
2. about.html
(About Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>About Us</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Our Story</h2>
<p>Here is a brief overview about our company.</p>
<h3>Our Values</h3>
<ul>
<li>Integrity</li>
<li>Innovation</li>
<li>Customer Satisfaction</li>
</ul>
</main>
</body>
</html>
3. services.html
(Services Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Our Services</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>What We Offer</h2>
<table>
<tr>
<th>Service</th>
<th>Details</th>
</tr>
<tr>
<td>Consulting</td>
<td>Professional advice and strategies</td>
</tr>
<tr>
<td>Development</td>
<td>Custom software solutions</td>
</tr>
</table>
</main>
</body>
</html>
4. contact.html
(Contact Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Contact Us</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Get in Touch</h2>
<p>You can reach us at:</p>
<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
<p>Follow us on social media: <a href="https://twitter.com" target="_blank">Twitter</a>, <a href="https://facebook.com" target="_blank">Facebook</a></p>
</main>
</body>
</html>
Step 3: Create CSS File
Create a CSS file named styles.css
in the same folder:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background: #35424a;
color: #ffffff;
padding: 10px 0;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
}
main {
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background: #35424a;
color: #ffffff;
}
Step 4: Summary for Client Update
As of this point in the project, I have successfully created a basic website structure including four essential pages: Home, About, Services, and Contact. Each page is interlinked for easy navigation, and I have implemented a CSS file to maintain a consistent design across the pages. The About page includes a list highlighting our values, while the Services page features a table defining our offerings. Additionally, external links have been incorporated for social media access and email contact. The next steps will involve adding more content, enhancing features, and optimizing for responsiveness.
Final Step
Save all the files into your "My Website" folder. Your website is now structured and ready for further development or presentation!