Let's Create Our Websites Navigation With HTML - How To Create a Website With HTML and CSS #8

Welcome to lesson #8 of my How To Create a Simple Website With HTML and CSS. If you missed the previous lessons you can watch em below:

1. Introductory To The Course
2. Creating Your First Webpage
3. Working With Web Developing Coding Editors
4. Introductory To HTML
5. Designing a Wireframe For Our Website
6. Adding Structure To Our Webpage with HTML
7. Creating Our Websites Header and Footer

Today we are going to be building our websites navigation, or at least the basic skeleton of it. You can watch the video for this lesson below:

In the last section of the course we created the basic structure of our website with HTML.

Now it's time to start adding content to our website. Let's start off designing the navigation for our website.

A website's navigation usually consists of a title or logo that links to the homepage and links to the other important webpages on the site as well. Let's start off by making our site title link back to the homepage of our website.

I'm going to be adding a new element here, called an anchor element. I'm going to then wrap my H1 inside our newly created anchor element, and add an attribute here with the text index.html. What we are doing here is anchoring our URL, aka index.html to the text of our H2 element.

Index.html is generally the homepage of a website and also the name of this file. When we create the other pages for our website we will link to them as well. For now, just stay with me and you will see how it works more clearly as we develop our website.

The navigation for our website is commonly created with a list.

The first thing we are going to do is add a new element to our navigation inside our header. What I'm going to do now is add our links as an unordered list.

This will add our links in a bulleted form, sort of like in Microsoft Word. The <UL> tag here stands for unordered list. We are then going to add our other pages as list items inside our unordered lists. The <LI> tags stands for 'list item.'

First, let's start off with our about page, and then make a list item for all the other pages we will be creating later on for our website.

I'm gonna start off by putting in anchor element, with our href. And it's linking to our about.html page, which we havn't created yet.

We also need to add text to display as our list item, so I'm going to type in about here.

Once this is complete, we are going to have to copy this piece of code here and we will just paste it for our other pages, and make some small changes to reflect those pages.

Let's copy this, and paste it a couple times in here.

So let's change this to our blog page. We're also gonna change this to our contact page. And we need to add one more here, and that's gonna be for our Portfolio page.

After we change the text that's being displayed for each list item, we need to change the HTML pages.

Now, we haven't created these pages yet, but I'm just going to go ahead and add them here, because this is what we'll be naming these pages later on as we create them.

Now, before we go any further, let's give our webpage a quick save and see how everything looks in the web browser.

Alright, cool. Our site title now links back to our index.html homepage, and we have our list here with the name of each of our website pages. Of course, if we click on them, they're not working right now, because we haven't added our pages, but once we do add our webpages to our website, everything will work correctly.

Before we go, however, I noticed that my homepage link is not working, and this is because we're linking to index.html, because unfortunately up at the top here, we actually have our index.html.html, so we have our name incorrect here, so I'm going to go ahead and fix that, and then our link should be working correctly.

Alright, so our file path should be correct now, now let's open it up and yes, we can see it's now actually just going back to the same page, so it doesn't look like anything is happening, but we're actually just going back to the page we're currently viewing.

So again, our title is linking correctly and we got that all figured out.

Good job. We did some solid work with our website navigation and we are ready to move on and start working on our portfolio page.

To be continued!