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.
Navigation with Links
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.
<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>
./refers to the current directory. More info about this can be found in the section relative and absolute URLs.
Our navigation should now look as follows:
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
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.
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.
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
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:
- Feeding the cat
- Visit grandmother
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
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.
Navigation as List
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> <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.
<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>
→ Continue with Part 7: Using the Bootstrap Framework.