Adding more pages

Links

Before creating multiple pages we must first understand the concept of links. Links are used to join pages together, allowing us to jump from one page to another.

Have you ever wondered why it is called the web? Think about a spider’s web. It is basically lots of little threads all linked together in an amazing pattern. Now think about the internet. The internet is simply a lot of HTML web pages that link to other HTML web pages. Surfing the web means moving from page to another page by clicking on these links. So let’s add a link to our web page. Links are created using the <a> anchor tag. Here is how we would create a link to the Belfast Coder Dojo web site.

<a href="http://www.coderdojobelfast.com/">Coder Dojo Belfast</a>

Add this line to your page body, refresh the page and then click on it. If all goes to plan you should jump to the Belfast Coder Dojo home page. Now click on the browser's back button to see your page again. Try adding some more links to your page with different URLs in the anchor tag.

Creating more pages

We have now created a single web page. However our ambition is to create a web site, which is basically a just collection of web pages. So let’s create a second HTML file called page_2.html and pasting the same original content into it. Here it is again so you don't have to go back.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page 2</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Write more HTML content in the space below -->

</body>
</html>

page_2.html

To create a new file in NotePad++ go to the File menu and select New. Copy the above block of HTML and save it as page_2, remembering to add the .html extension to the file.

Tip

When creating internet files it is best not to have spaces in their names.
Use the underscore _ character to replace the spaces in file names.

Add some content to this page and then load it in your browser to check it looks as expected. Repeat this process to create all the pages for your site, sequentially naming the files 3, 4, 5...

Linking our pages

Now that our site has multiple pages we need to add links to each of them, so we can jump from page to page. We shall do this by creating a <nav> section on each page and adding the links to this block.

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="page_1.html">My photos</a></li>
        <li><a href="page_2.html">My Games</a></li>
        <li><a href="page_3.html">Contact</a></li>
    </ul>
</nav>

Generally this would be one of the first elements in the HTML body as it should appear near the top of your page body content. Shown above is an example of a navigation section that would be included on every page of your web site.

Tip

Web pages do not need to link to themselves, so for example, page_2 should not have a link to page_2.html

Embedding videos and games