HTML Tutorial / Build a Small Multipage Website

A small multipage site brings together document structure, semantic regions, links, and forms. In this project you will create Home, About, and Contact pages in one folder, navigate among them, and check the result. HTML alone cannot receive or store contact messages, so the form here is an input demonstration, not a working contact service.

Prepare the files

Create a new folder and save these three UTF-8 plain-text files inside it. Their filenames must match the menu's href values exactly.

small-site/
  index.html
  about.html
  contact.html

Make sure the editor did not append another extension such as .txt. Keeping all three files together lets href="about.html" find the About page using a relative path. If you later move a file into another folder, update the relevant links. Finish the text-only version first; then you can add images you have the right to use, with appropriate alt text.

Create the home page

Save the following complete document as index.html. Use the same three menu destinations on every page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home | Small Garden</title>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Small Garden</h1>
    <p>A small guide for people starting to grow plants.</p>
  </main>
  <footer><p>Small Garden</p></footer>
</body>
</html>

Opening index.html should show a menu and the “Small Garden” heading. The About and Contact links will not work until you create their files in the same folder. The h1 here belongs to the example page, not to this tutorial post.

Create the About and Contact pages

Copy index.html to about.html. Change its title to “About | Small Garden” and replace the existing main element with:

<main>
  <h1>About</h1>
  <p>Small Garden helps new growers learn the basics.</p>
</main>

Copy index.html again to contact.html. Change its title to “Contact | Small Garden” and replace its main with this practice form:

<main>
  <h1>Contact</h1>
  <form action="" method="get">
    <p><label for="visitor-name">Name</label>
       <input id="visitor-name" name="name" required></p>
    <p><label for="message">Message</label>
       <textarea id="message" name="message" required></textarea></p>
    <button type="submit">Check entered values</button>
  </form>
</main>

Replace the original main from its opening to its closing tag; do not nest another main inside it. Keep the shared header menu and footer in both copies. Each file should contain one html, head, and body element. Give each page a distinct tab title and visible heading.

“Check entered values” does not send a message to anyone. The browser checks the required fields and submits to the current document using GET. Test with placeholder text only, because submitted values may appear in the URL. A real contact service needs a server handler, privacy protections, spam controls, and a clear success or failure response.

Check the finished site

1. Open index.html and confirm that every menu link opens the correct file.
2. From About and Contact, navigate to both other pages too; do not test only the home menu.
3. Check that each tab title and visible h1 describe that page.
4. Use Tab to reach every link and contact-field control.
5. Try submitting empty fields, then enter test values and observe the URL.
6. Check each file with the Nu HTML Checker, fix errors, and check again.

If a link fails, check the filename and relative path first. When you edit a shared menu, update all three copies. As a site grows, maintaining repeated markup consistently becomes important. In this exercise, a form that does not actually deliver a message is expected; the goal is to build and verify the HTML interface.