Right here, you can see in the finished product, we have these navigation elements. If I click on them, they will take us to these other pages. Let's walk through exactly what needs to happen in order for that to work.

We're also going to add all of the pages that this entire project is going to use. We're going to start building this out. Now, I know that you may be getting a little bit frustrated because we've been doing quite a bit of work, and we still seem like we're a very far distance away from here.

If you're learning HTML and CSS for the first time, it is critical to have some of the fundamentals down. We are building out the project, but we're learning the fundamentals as we go. Let's get started on this. Let's create the other files that we need, and let's talk about links.

I'm going to switch back to the code editor here and I'm going to get rid of all of these sample code items. I'm going to get rid of styles too, and everything else here. I'm going to start by just saying homepage. I want to do another h1 and I'll say homepage.

I'm also going to indent that. Just a little side note, the indentation that you use is very important. The browser doesn't care about indentation at all, so it's perfectly fine. You could technically have tabs all over the place and place this right here, and this is still going to work.

If you hit refresh, you can see it still says homepage, but from a best practice perspective, you really want to make sure that your code is aligned properly. As you go through the project, you'll see how it should be.

For right now, just know that if you have a nested item like this h1 tag is nested inside of this body tag, then it's probably a good idea to indent it. That way it's very clearly nested inside.

Now, with all that in place, let's also update the title. This is going to say Homepage. Later on, we're going to probably change it, but for right now, let's keep it at Homepage. Now, let's create those other files.

Let's copy everything that we have here, and now we're going to create an About page, a Contact page, and a Menu page. The way you can do that is by just coming over here in Visual Studio Code on the left-hand side, go to the menu bar, click on new document and say about.html.

Then you can paste that into the title. Let's say About, and then in the content itself, just so we can watch it all changing, we're going to say About. Now, let's copy this, and now go and create another document.

This one will say menu.html. Paste that in and as you may have guessed, change the title to say Menu, and then change that heading to say Menu. We just have one more left, so create one more document. We'll call it contact.html.

Now, you can call these files whatever you want, but I think it makes sense for them to have a very similar name just so you know exactly what is inside of each one of them. Say for example, and I have seen some students do this, where they'll create one file and call it index.html. That's a convention, your homepage should also be called index.html.

That's what browsers look for, but what the issue is I've seen before is something like having the index page there and then the other pages would be something like 2.html, 3, 4, 5, and 6.html.

That's not very clear. If you have, say a hundred pages, you want to very clearly and quickly be able to look on the left-hand side, know what is in that file, and then it will make it easier for you later on when you want to go and make updates. The last one is going to be Contact, and hit save.

Now, if we come back here, right now we just have our Homepage, but if you come up here to the menu bar and you type say, menu, you can see it pulls up our menu document.

Then, here if I say contact, it's going to pull up the contact document. This is exactly the same process as if you hit control + o, and then you just went and you clicked on one of these. If I click on index once again, then we're back on the homepage.

All of our files that we want to use are all there. Now, how can we link to them? In the index, the way that you can do this, and this is going to be the start of our navbar, is we are going to use what is called an a-tag.

You can just start typing a, then hit tab complete, and it's going to look for an href. Now, this href, as you may have noticed, is also the same href we used up here for styles.

What the HTML document is saying is that we need to provide a path to the file that we're wanting to call. That's really all a link is. For a basic HTML site is a link to another document. Here, we can say about.html and inside of the tag itself we can say About.

**index.html

<a href="about.html">About</a>

Now, let's just copy this. Now, we're going to say menu and then menu. Then, we'll say contact and then contact. At the very top, let's also add one for our homepage. This is going to be index.html and this will just say Home.

<h1>Homepage</h1>

<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="menu.html">Menu</a>
<a href="contact.html">Contact</a>

Now, I do want to go back just very briefly and say I've kind of glossed over the reason why we use index.html and we use this naming convention. It's because many servers when they call for a file or they go into a directory, so kind of like, say that you have a server that goes and it hits this HTML CSS directory. The very first thing it's going to show is a file called index.html.

If you don't set up any rules on the server or anything like that, it is going to assume that there is an index file, and it's going to try to show that. Once you get into bigger frameworks, like using tools like React or Rails, a lot of that is done for you and you don't have to do this part yourself, but that is the standard convention.

You're going to see the name index.html quite a bit as you build out websites and that's the reason. It's because that's what the server looks for. Okay, so now that you have that piece of information, let's switch back to the browser on our homepage and hit refresh.

Now, you can see we have our menu here. If I click on about, then you can see it takes us to the about page. I'm going to go back and if I click on menu, it takes me to the menu page. Contact takes me to the contact page.

That's all that links are is we are just telling HTML where to go find another document. In this case, it's just the documents that we have here locally. Now if you want to add this navbar to all of the other pages, then you have to copy this code and put it on each one of those pages.

Let's do that now, just to make it a little bit easier to navigate. I'm going to add it to about.html, menu.html, make sure you're saving it after each time, and then contact.html.

Hit save, and then come back and hit refresh. Now, if you click on any of these links, you'll see that our navigation menu's still there and it's because we copied all the links over. That gives us the ability to do that.

Now, I told you that this is a path to the document. It's important that it isn't just the document name. Let's add in a little demo here. If I click on new folder and say I have a folder here called pages. Inside of pages, I have another document and we'll just call this something like, let's say just demo.html, just like this.

In the index.html page, if I come down here and I create a new link and say <a href="demo.html">Demo</a>, hit save. Let's come and let's copy all of this content here just so we know once we've successfully reached the demo page. That's demo and then demo.

Okay, so I'm going to hit save. Notice I'm also keeping these nav elements here. It's for a reason I'm going to show you here in a second. Now, if we come back to the homepage, you can see we have this little demo link.

Now, if I click this, it's going to throw an error and the reason is because, and you can find this up in the URL bar, notice where it tried to find the document. It was still in the HTML-CSS directory, and then it just tried to find demo.html.

It's not just the file name. It's actually the full path that you have to provide. The way you could fix that is right here just say pages/demo.html. Now, if you hit refresh and go and click on this link, you can see that that works. That's part of it.

Now, there are a couple other things that it's important to understand when it comes to links. Do you notice how the styles are no longer being applied? The reason for that is because when we're importing the style sheet here in the demo, what is happening is it's all relative.

The demo.html file is looking for a styles.css file inside of the pages directory. That is very important to understand. If you don't understand that part, then you are going to run into a lot of bugs when it comes to understanding how the path works and how you can access and import files.

We saw how you can go and grab that demo link. Let me close off some of these other files and also, one very helpful little trick if you've never done this before. Let me close off everything.

I'm going to have demo open and then, let's also take a look at the index page right next to each other. You can right-click on a file and then, right here you can say open to the side.

Now, you can see both of these right next to each other. I'll close this. Now, the issue that we're having is that our styles is looking for it in the wrong place. What we can do here is go backwards. We're going to use a little bit different syntax.

Inside of our pages directory, when we want to move backwards we need to use two dots. In front of styles, put ../styles.css. That is going to traverse us back up one directory. Now, if I hit refresh, you can see the styles are now being pulled in properly. That's how you can traverse that.

Now, we would also have to do the same thing right here. Let's just go and let's take this demo just so we have all the same exact links. Notice here, when you're in that demo directory, in the pages directory, you do not want to say pages again or else then it's going to try to jump up into another page's directory.

We want to delete that, but now, if you hit refresh, all of these are going to be broken. If you click home, that's broken, about is broken, and hopefully by now it's starting to make sense why those are broken. It's because we need to move one level up.

The way we can do that is just to add that .. in front of each one of these file calls. I'm going to say ../, hit save, and notice I did not do with the demo because that one is actually in the right directory.

Now, if I hit refresh, click on about, that works. Click on menu, click on home, go back to demo, demo still works when you click it, and then you can navigate to all of the other pages. That is how you can work with the path whenever you're wanting to link to other pages in the program.

Now, the very last element that I'm going to talk about, let's close off demo, is when you want to link to an outside service. Say that you want to link to Instagram. You can say <a> and then here, if you want to link to a outside website, you need to provide the full path.

Here, I can say <a href="https://Instagram.com/JordanHudgens">Instagram Profile</a> and we'll just say this is the Instagram Profile. Hit save, now come hit refresh, and now you can see Instagram Profile is here.

If I click on this, then it's actually going to open up Instagram just like that. You're able to not only link to your own internal documents, but you can also link to other websites or anyplace on the website that you want to navigate the user to.

Now, do you notice also how when I clicked on that, it actually took us away from the page? That may not always be what you want to do, so I think it's a good time to talk about some of the optional attributes that you have with links.

Right here, this is the most basic kind of link you're ever going to use. You have an <a> tag with an href, which is where you want the user to go if they click. Then, you have the content. Now, you also have the ability inside of that tag to say target="_blank".

The link is going to open up that target or it's going to open up that link in a new tab. Now, if you switch back, hit refresh, if you click on Instagram profile now, you'll see that it opens up in a new tab and it didn't get rid of the actual page that we were on.

Depending on the type of user experience that you're wanting to give your site visitors, you have both options available to you.

In review, we starting building out our navigation bar, we saw how links work, we saw how we can work with different path values, and how we can traverse up and backward. We also were able to see how you can link out and have some optional behavior, like targets, when you're wanting to connect to third party websites.