Making multiple pages

1. Websites usually have more than one page

• Most websites are made from multiple pages that work together to share information because a single long page quickly becomes hard to navigate.

• Splitting content into pages helps users find what they need faster since each page can focus on one topic without distractions.

• A multi-page site usually repeats the same layout on every page so it feels consistent which reduces confusion because users do not have to re-learn where things are.

• Navigation links are what connect pages into one website rather than separate files and without them users get stuck on one page.

2. A new page is usually a new .html file

• In a basic website, each page is typically a separate file ending in .html which the browser can open and interpret as HTML.

• This works because the browser treats each file as a separate document with its own content and title even if the layout is shared.

• If you only create index.html, then you only have one page available to navigate to so every link you add must point somewhere real.

• If a link points to a file that does not exist, the browser will show an error or a blank load which makes the website feel broken and unreliable.

3. File naming matters because links must match exactly

• When you link to another page, the link must use the exact file name, including spelling and capitalization because computers do not guess what you meant.

• A link to Tokyo.html is different from a link to tokyo.html so inconsistent naming is a common cause of broken navigation.

• Good file names are short, lowercase, and avoid spaces, because they are easier to type and less error-prone especially when you start adding more pages and folders.

• Using a clear naming pattern also makes your project easier to maintain later because you can immediately tell which file represents which page.

4. Hyperlinks connect pages using the <a> element

• A hyperlink is created using an anchor element written as <a>, which tells the browser that text should be clickable instead of plain content.

• The destination is stored in the href attribute, which is the address the browser loads when clicked so it must be correct or the link fails.

• When you link between pages in the same folder, the href can be just the file name like tokyo.html because the browser searches relative to the current file.

• This is called a relative link, and it is useful because the site still works even if the whole folder is moved to another computer since the relationship between files stays the same.

<p>
  <a href="tokyo.html">Tokyo</a>
</p>

5. Each page should identify itself so you can tell where you are

• When you create multiple pages, each page needs a clear heading so the user knows which page they are viewing because the browser window alone does not explain the page content.

• If pages look too similar and do not label themselves, users get lost and may not trust the navigation especially if they are moving quickly between pages.

• A simple way to do this is to put a city name heading near the top of each page using <h1> then follow it with one or two short paragraphs.

• Even placeholder text is useful during development because it proves the link worked and the correct file loaded which helps you debug faster.

<h1>Tokyo</h1>
<p>This page will include facts, images, and links about Tokyo.</p>

6. Navigation works best when every page links to every other page

• If only the home page contains links, users cannot move easily between pages without going back first which creates unnecessary steps and makes the site feel awkward.

• A navigation bar solves this by providing the same set of links on every page so users can jump directly to the page they want.

• Consistent navigation is important because users build habits based on where links appear and changing the navigation layout across pages increases mistakes.

• The simplest approach is to copy the same navigation HTML into each file so every page has identical links which also makes testing easier.

<nav>
  <a href="index.html">Home</a>
  <a href="tokyo.html">Tokyo</a>
  <a href="osaka.html">Osaka</a>
  <a href="hiroshima.html">Hiroshima</a>
  <a href="matsuyama.html">Matsuyama</a>
</nav>

7. A <nav> element is a semantic label for navigation links

• The <nav> tag tells the browser and other tools that the links inside are for site navigation which gives the page clearer meaning than a generic container.

• This matters because screen readers and other accessibility tools can use <nav> to help users move around the page efficiently instead of reading every link as if it was part of the main content.

• Using semantic tags also makes your code easier to understand because it communicates intent so future you can quickly identify which part controls page navigation.

• If you use random containers for everything, you can still build a page, but it becomes harder to maintain as the project grows because structure is no longer obvious.

8. CSS can style the navigation so it looks like a bar, not plain links

• By default, navigation links appear as standard blue underlined text, which is usable but looks unfinished because it does not visually separate navigation from page content.

• CSS lets you control spacing, alignment, and colour so the navigation reads as a distinct interface element which improves readability and reduces accidental clicks.

• A common approach is to give the <nav> a background and padding, then style the links for consistent spacing so the bar works even if the page content changes.

• If you do not style the link spacing, the nav may feel cramped and users may click the wrong link especially on smaller screens or when projecting in class.

nav {
  padding: 12px;
  background: #f0f0f0;
}

nav a {
  margin-right: 12px;
  text-decoration: none;
}

9. Your pages must link the CSS file or the styling will not apply

• CSS does nothing until the HTML page loads it using a <link> element in the <head> because the browser only applies styles it has been told to fetch.

• If one page forgets to link the stylesheet, that page will look different and break the consistent feel of the website which makes it seem like the site is not connected.

• The href for the stylesheet is also a relative path, so it must match the folder structure exactly and a wrong path is a common reason styling “does not work”.

• Testing by refreshing each page after saving is important because the browser will not show changes until the new file is loaded especially if the old version is cached.

<head>
  <title>Tokyo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

10. Improve the navigation styling so it is clearer and easier to use

• Good navigation styling makes links easy to see and easy to click, which reduces user mistakes because users rely on navigation to move through the site quickly.

• Hover styling is helpful because it gives immediate feedback that something is interactive and without feedback users may hesitate or click repeatedly.

• Small CSS changes like bold text, stronger contrast, and a hover effect can make the interface feel deliberate and they also make your site easier to use when projected on a classroom screen.

• If your colours have low contrast, some users will struggle to read the links, so clarity should matter more than decoration especially for accessibility.

nav {
  padding: 12px;
  background: #f0f0f0;
  border-bottom: 1px solid #cccccc;
}

nav a {
  margin-right: 12px;
  text-decoration: none;
  font-weight: 600;
  color: #222222;
}

nav a:hover {
  text-decoration: underline;
}