How to add navigation to a simple HTML page

brackets iconIn this lesson we’ll add navigation between our two simple HTML web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.
Our link at the top looks a little lost and alone. Most websites have more than one page, so let’s add an element that lets us navigate between multiple pages. In the process we’ll meet some more new tags, and even add our first CSS style.

Use the buttons below to navigate through the lesson

img0
img1
img2
img3
img4
img5
img6
img7
img8
img9
img10
img11
img12
img13
img14
img15
img16
img17
img18
img19
img20
img21


Make the following changes to your index.html:

<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>
<body>
<nav>
<ul>
<li><a href=”Index.html”>Home</a></li>
<li><a href=”About.html”>About</a></li>
</ul>
</nav>
<section id=”content”>
<h1>FOTC Website Tutorial</h1>
<div>
<h2>Making our first page</h2>
<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>
<p>For now we only have a simple page, but later we will make it more complex and interesting.
</div>
<div>
<h2>What have we learned so far?</h2>
<p>So far we have learned a few simple tags for placing text onto a page.</p>
</div>
</section>
</body>
</html>

You’ll note that I’ve removed our old <a> tag from inside the <section>. I’ve added an id attribute to the section – don’t worry about that for now, we’ll need it later.

I’ve also added a new <nav> element which contains some HTML.

Make the same changes to about.html – remove the old link, add the SAME <nav> element and the id attribute to section.

HTML 7 - 1Now both pages should have a list at the top that looks like this:

Let’s look in detail at these changes.

The <nav>, <ul> and <li> elements

The <nav> element is a special grouping element. It doesn’t do anything technically to the site, but it allows computers and search engines to understand how to get around your site. It is short for navigation. Each webpage should have one <nav> element which contains links to the different sections of your website.

Inside our <nav> element we’ve used another new tag, the <ul> tag.

This tag stands for unordered list – it is used whenever we have a LIST of items… such as a list of sections for our website. There are other kinds of list tags, such as an ordered list or a numbered list, but the most appropriate list for navigation links is an unordered list because it doesn’t matter what order the links are written in.

Inside the unordered list we have two <li> tags. These stand for list items – a <ul> must have one <li> for each item in the list. And each list item contains our links.

Now whenever we want to add a new page to our site we just have to add a new <li> to our list which contains the appropriate link. For example, if we wanted a Contact page, we might create Contact.html and add: <li><a href=”Contact.html”>Contact</a></li>

I’m sure you can think of many other pages you might want to add to your own sites.

Styling our navigation list

We are going to look at CSS in more detail later. For now let’s just add some to make our navigation look a little nicer.

Inside our <head> element on both pages, add the following HTML:

<head>
<title>FOTC First Website</title>
<style>
html { font-family: Arial; }
body { padding: 10px 30px; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.2em; }
nav { background: black; padding: 5px; }
nav ul { list-style: none; }
nav ul li { display: inline; margin-left: 15px; font-weight: bold; }
nav ul li a { color: white; }
nav ul li a:visited { color: white; }
nav ul li a:hover { color: orange; }
a { text-decoration: none; color: blue; }
a:visited { color:purple; }
a:hover { color: orange; }
</style>
</head>

Now if you save and refresh you’ll see we have a navigation bar on both of our pages, and the pages all look much prettier.

HTML 7 - 2For now, don’t worry about understanding the code we’ve just added. All of the unfamiliar looking text is CSS, which we will cover in a future lesson. You may notice the names of colours we’ve added – you can change those colours and save and refresh and see what happens!

Experiment by setting the colour names to different colours and seeing how it affects your website. See what combinations you like!

Wait, didn’t you say NOT to put styling in our HTML? What is this <style> element then?

You’re right, I DID say not to do that. If you’ve experimented with changing the colours and swapping between the pages then maybe you’ll realise why! The <style> element lets you put CSS code into your pages, and the CSS code changes the way your page looks.

HOWEVER, we have to put the same CSS code into every page. If you tried changing colours then you probably found that you had to make the same changes on both pages – which is annoying and difficult to remember. Imagine if you had 100 pages on your site… you’d have to change 100 files every time you wanted to change how your site looks.

So, we have in this case used a <style> element in our HTML, but hopefully you can see why it’s a bad idea. Later in the course we will replace our <style> element with a better solution – but for now we haven’t yet learned how to do that so we’ll just keep our <style> element until then.