Ask a New Question
Menu

Create four HTML pages and one CSS file. All pages must be typed in a text editor like Notepad and saved as html or css files.

Download the grading rubric
2. Locate the navigational structure plan you created in part 3 of the final course project/portfolio assignment and use it to create your first four pages. (Additional pages may be created later.)
3. Create a folder on your computer and name it My Website.
4. Save all four of your HTML pages and your CSS file in the new folder.
5. Each page should include navigational anchor links to each other page in the site.
6. Each html page should include code to input the css file.
7. Include two anchor links to an outside source.
8. A bulleted or numbered list must be included on at least one page.
9. A table with more than one column and row must be included on at least one page.
10. Write a one-paragraph summary describing the update you may provide to your client at this point in the project.

1 answer

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

  1. 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!