Learnit Training

7. Add Navigation

When you create a website it will probably not consist of one page. Therefore, In a later chapter, we will add a number of pages. To get to one of those other pages, we need a navigation menu. And that's what we're going to do in the next exercise.

7.1 Setting up a list

HTML has the ability to create a bullet list just like in Microsoft Word. If you also want to create a navigation menu, take the code below.

Online Free HTML5 and CSS training from Learnit

As you can see in the code above, a list has been created consisting of four items. This list starts with the UL-open tag and ends with the ul-lock tag. This UL stands for "unordered list" (or a non-numbered list). In This ul-container are Li-open and Li-close tags. Li is in this case for "list item". When you view the result in the browser, you see a bullet list at the top of the page. From this list we will create the navigation menu.

7.2 Adding anchors to the navigation menu

To actually make the menu list work, adding anchors is required. Inside the Li-container we place an A-container so that all items in the list are clickable. See the image below for the code.

Online Free HTML5 and CSS training from Learnit

Because we don't have any other pages yet, the menu will not work, we'll solve it in Chapter 10.