24 min read

Building a Multi-Page Site

Give every page the same header, logo, navigation bar and footer, change only the main content, and link the pages together.

Consistency Across Pages

Visitors should always know which site they are on and how to get anywhere else . So every page shares the same: header with the logo (linking to the home page), navigation bar with the same links in the same order, footer with contact details and credits. Only the <main> content and the <title> change from page to page.

A Page Template

menu.html — built from the templateHTML

1<!DOCTYPE html>2<html lang="en">3<head>4  <meta charset="UTF-8">5  <meta name="viewport" content="width=device-width, initial-scale=1.0">6  <title>Menu | Ceylon Leaf Tea Room, Galle</title>7</head>8<body>9  <header>10    <a href="index.html"><img src="images/logo.svg" alt="Ceylon Leaf Tea Room home" width="200"></a>11    <nav>12      <ul>13        <li><a href="index.html">Home</a></li>14        <li><a href="menu.html">Menu</a></li>15        <li><a href="gallery.html">Gallery</a></li>16        <li><a href="order.html">Order</a></li>17        <li><a href="about.html">About</a></li>18      </ul>19    </nav>20  </header>21 22  <main>23    <h1>Our Menu</h1>24    <p>All prices are in Sri Lankan rupees (LKR).</p>25  </main>26 27  <footer>28    <p>Ceylon Leaf Tea Room · 12 Church Street, Galle Fort · Open daily 9.00 am – 7.00 pm</p>29    <p><a href="about.html#credits">Photo credits</a></p>30  </footer>31</body>32</html>

What the browser shows

A Safe Way to Build Five Pages

1 Finish index.html first, with the complete header, navigation and footer. 2 Test every link in the navigation bar. 3 Save a copy as menu.html (File \to Save As), change the title and replace only the <main> content. 4 Repeat for gallery.html, order.html and about.html. 5 If you later change the navigation, change it on every page.

Writing the About Page

Assignment briefs often ask for an About page with the business's history, vision, mission and values . These are business words, so learn what each one means before you write:

Four parts of an About page
Four parts of an About page

The main content of about.htmlHTML

1<main>2  <h1>About Us</h1>3 4  <h2>Our story</h2>5  <p>Our founder grew up on a tea estate near Nuwara Eliya. In 2016 she opened a small tea counter with four tables…</p>6 7  <h2>Our vision</h2>8  <p>To be the place every visitor to Galle remembers for a real cup of Ceylon tea.</p>9 10  <h2>Our mission</h2>11  <p>We brew single-estate teas bought directly from small growers and bake traditional sweets fresh every morning.</p>12 13  <h2>Our values</h2>14  <ul>15    <li><strong>Freshness</strong> — tea brewed to order and sweets baked each day.</li>16    <li><strong>Fairness</strong> — fair prices for growers, staff and guests.</li>17    <li><strong>Hospitality</strong> — every guest is welcomed like family.</li>18  </ul>19</main>

What the browser shows

Checking the Site

Worked example

Kasun's link checklist

From Check Every page Logo \to index.html Every page All five navigation links open the right page Home "Order or book a table" button \to order.html Menu "Order now" button \to order.html Footer "Photo credits" \to about.html#credits About Email and phone links open the mail app and dialler

Practice

Which element should be the SAME on every page of the site?

More lessons in HTML · Next: A Gallery Page · Previous: Submit and Reset Buttons — the Complete Order Form

Consistency Across Pages

Visitors should always know which site they are on and how to get anywhere else . So every page shares the same: header with the logo (linking to the home page), navigation bar with the same links in the same order, footer with contact details and credits. Only the <main> content and the <title> change from page to page.

A Page Template

menu.html — built from the templateHTML

1<!DOCTYPE html>2<html lang="en">3<head>4  <meta charset="UTF-8">5  <meta name="viewport" content="width=device-width, initial-scale=1.0">6  <title>Menu | Ceylon Leaf Tea Room, Galle</title>7</head>8<body>9  <header>10    <a href="index.html"><img src="images/logo.svg" alt="Ceylon Leaf Tea Room home" width="200"></a>11    <nav>12      <ul>13        <li><a href="index.html">Home</a></li>14        <li><a href="menu.html">Menu</a></li>15        <li><a href="gallery.html">Gallery</a></li>16        <li><a href="order.html">Order</a></li>17        <li><a href="about.html">About</a></li>18      </ul>19    </nav>20  </header>21 22  <main>23    <h1>Our Menu</h1>24    <p>All prices are in Sri Lankan rupees (LKR).</p>25  </main>26 27  <footer>28    <p>Ceylon Leaf Tea Room · 12 Church Street, Galle Fort · Open daily 9.00 am – 7.00 pm</p>29    <p><a href="about.html#credits">Photo credits</a></p>30  </footer>31</body>32</html>

What the browser shows

A Safe Way to Build Five Pages

1 Finish index.html first, with the complete header, navigation and footer. 2 Test every link in the navigation bar. 3 Save a copy as menu.html (File \to Save As), change the title and replace only the <main> content. 4 Repeat for gallery.html, order.html and about.html. 5 If you later change the navigation, change it on every page.

Writing the About Page

Assignment briefs often ask for an About page with the business's history, vision, mission and values . These are business words, so learn what each one means before you write:

Four parts of an About page
Four parts of an About page

The main content of about.htmlHTML

1<main>2  <h1>About Us</h1>3 4  <h2>Our story</h2>5  <p>Our founder grew up on a tea estate near Nuwara Eliya. In 2016 she opened a small tea counter with four tables…</p>6 7  <h2>Our vision</h2>8  <p>To be the place every visitor to Galle remembers for a real cup of Ceylon tea.</p>9 10  <h2>Our mission</h2>11  <p>We brew single-estate teas bought directly from small growers and bake traditional sweets fresh every morning.</p>12 13  <h2>Our values</h2>14  <ul>15    <li><strong>Freshness</strong> — tea brewed to order and sweets baked each day.</li>16    <li><strong>Fairness</strong> — fair prices for growers, staff and guests.</li>17    <li><strong>Hospitality</strong> — every guest is welcomed like family.</li>18  </ul>19</main>

What the browser shows

Checking the Site

Worked example

Kasun's link checklist

From Check Every page Logo \to index.html Every page All five navigation links open the right page Home "Order or book a table" button \to order.html Menu "Order now" button \to order.html Footer "Photo credits" \to about.html#credits About Email and phone links open the mail app and dialler

Practice

Which element should be the SAME on every page of the site?

From	Check
Every page	Logo → index.html
Every page	All five navigation links open the right page
Home	"Order or book a table" button → order.html
Menu	"Order now" button → order.html
Footer	"Photo credits" → about.html#credits
About	Email and phone links open the mail app and dialler