Part 6: Navigation

In this part we will create a navigation so that visitors can switch between the pages.

A navigation can be as simple as a few links to other pages. We will begin with this very simple approach and continuously improve it until we have a beautiful and complete navigation on all pages.

We start by programming the navigation in our home page. Only when we’re done, we will copy the navigation code into all the other pages.

Open the index.html of your home page.

With simple links we can jump from our home page to other pages. The navigation should be at the very beginning of the body part. Let’s insert the following four links between the body tag and the title.

index.html

<body>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/projects">Projects</a>
  <a href="/contact">Contact</a>

  <h1 class="title">Web Portfolio of Marco</h1>

Note: The link to / refers to the root directory. More info about this can be found in the section relative and absolute URLs.

Our navigation should now look as follows:

Navigation with Links

Verify that the links actually work and that they lead you to the desired page.

Note: If you open the page as a file directly in the browser (without the Live Server) the links might not work quite right. The reason is that the file system simply displays the folder contents and not automatically opens index.html. You will have to manually click on index.html.

As soon as you publish the site on a server, the links should work as normal.

At the moment our navigation is simply a series of links. Mostly, in HTML, a list of links is used for navigations. With an HTML list elements can be grouped together horizontally or vertically which will simplify their syling.

Let’s learn how to create HTML lists.

Lists

There are many situations in which we use lists. In HTML, there are three different types of lists: unordered lists, ordered lists, and description lists. Description lists are not used often. Therefore, we will only look at the first two in more detail.

Unordered Lists

An unordered list is simply a list of entries in which the order is arbitrary. Unordered lists are created in HTML with the element <ul> (stands for unordered list). For each entry in the list a <li> (list item) element is needed within the <ul> element.

Here is an example of a typical todo list:

<ul>
  <li>Shopping</li>
  <li>Feeding the cat</li>
  <li>Visit grandmother</li>
</ul>

The result looks like this:

Shopping
Feeding the cat
Visit grandmother

Ordered Lists

In ordered lists, the order is significant and is therefore numbered. In HTML, it looks very similar to the unordered list: Instead of <ul> we use an <ol> element.

A typical example of an ordered list is a recipe for a meal:

<ol>
  <li>Crack eggs, add a pinch of salt, then use a fork to beat them together well.</li>
  <li>Add milk.</li>
  <li>Melt butter in a frying pan and pour in the egg mixture.</li>
  <li>Continue cooking until thickened, then serve.</li>
</ol>

The result looks like this:

Crack eggs, add a pinch of salt, then use a fork to beat them together well.
Add milk.
Melt butter in a frying pan and pour in the egg mixture.
Continue cooking until thickened, then serve.

We will now program the navigation of our portfolio as an unordered list.

The links of our navigation are put in <li> elements that themselves are withn an <ul> element.

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/projects">Projects</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

In the final part of this tutorial we will see how the navigation can be displayed horizontally and nicely formatted. Once the navigation is complete, we will copy it to all other pages.

Blog Entries as List

On our blog page we had put a comment where we wanted to list our blog entries. Now that we know how lists are created in HTML, we can list the blog entries.

Open the blog page blog/index.html. Below the “Blog Entries” heading insert the list of entries as follows.

blog/index.html

<h2>Blog Entries</h2>

<!-- Here will be a list of all the blog entries. -->
<ul>
  <li>More entries will follow...</li>
  <li><a href="second-entry/">Second Entry</a></li>
  <li><a href="first-entry/">First Entry</a></li>
</ul>

Note: Blog entries are often listed in reverse chronological order so that the last entry appears at the top of the list.

What’s next?

→ Continue with Part 7: Using the Bootstrap Framework.

code.makery