Build a navigation menu for a three-page website using HTML anchor tags and the href attribute. Each page links to the other two using page-2.html and page-3.html in the href, and the current page's link stays unclickable. Save and test in Chrome to confirm the links work.
When you have a website that has many different pages, you're going to want to have some type of navigation area or menu area that your visitors can go to in order to click on the links for page 2 or page 3 or the home page or your about page and so on. This video will show you how to add these navigation links to your site. Now I'm going to be using the Komodo HTML editor in this demo, but you can do the same thing in pretty much any editor. So I've got my editor open here and I've got my home page or index.html page here, page 2, and page 3. Let me show you what they look like in the folder. Now this is on my desktop, but this is the same setup that should be in place if you have these on the server or on the internet. They should all be in the same directory as your image folder and so on. So let's get on back to the editor here, and I've got a little bit of styling up here in the head section. I've got the navigation links right here in text form— they're not in clickable link form yet— and some content down here, some funky styling based on what's up here. Now on the home page where we're at right now, I do not make this clickable. On page 2, this file here, I would not make page 2 clickable, just the home page and page 3. On the page 3 file, you guessed it, I would not make the page 3 text clickable, only page 2 and the home page. That's just the way I do things. Others might not do it the same way. Totally up to you. Now how we do this is we add an anchor tag. So I'm gonna go ahead and put my opening anchor tag here and That's the opening bracket, the letter a, just like we have showing right here in this pop-up box, and space. We now need the attribute href. I used to call this the a href tag, and I was always wrong in doing so. It's the a tag or anchor tag with the href attribute. That's href equals sign, and then we want to put a couple of double quotes in there, and then Close that out. Now Komodo, this editor that I'm using, automatically— the way I've got things set up here anyway— automatically puts in the closing anchor tag there. I'm just going to cut that out of there and put that at the end of page 2 right there. Now in between the 2 double quotes is where we put the name of the file we're referencing with this text. So I need the name of the page 2 file, which is right here. That's all lowercase, page-2.html. Has to be exactly as it is. So come on back to my editor here, cursor right in there. Page-2.html. And we're golden there. Just double-checking href page quote close. Okay, same thing for page 3. Opening anchor tag, space, and with the Komodo editor I can just scroll on down here until I get to the href. Make sure that's highlighted, hit my Enter key. Bing bang boom. Put in a couple of double quotes, close that out. Get this guy out of the way here. Cut, put it at the end there, paste. And in between the double quotes, put the name of the file, page-3.html. And we are solid gold. Just a quick double check there. Yep. And now I want to make this a little more stylish. I'm going to put this as an H2 tag. Opening bracket, H2, closing bracket. And just cut this guy on out of there and paste it at the very end here. Let's go ahead and save this and let's check this guy out in our Chrome browser and click on preview. And there we go. Homepage, page 2, page 3. There's our page 2, yet to be styled up here. And let's go ahead and do that real quick. Come on back here and on to page 2. And this time I need to add the clickable links to the homepage and page 3. And there we are. I just paused the video there while I did all the typing. And I've got the opening H2 tag just as we did with the page 1 as referenced here on the Chrome browser and the closing H2 tag. And then I've got the opening anchor tag with the href attribute, the name of the home page file, that's index.html. And then there's the closing anchor tag for the home page. Did not do anything for page 2. And then the opening anchor tag and the href attribute for page 3. And then the closing anchor tag for page 3. And I've already saved that. And same thing with page 3. I've already added all the needed tags here to make these navigation links clickable. Opening h2 tag, closing h2 tag, opening anchor tag for the home page and closing anchor tag for the home page, opening anchor tag for page 2, closing anchor tag for page 2, and nothing for page 3. So let's come on back here and refresh, and we are on the home page now. As you can see here, go to page 2. This is page 2. Should be clickable link to the home page, clickable link to page 3, On page 3, we have a clickable link to page 2. Boom. And come back to page 3 and a clickable link to the home page, and so on. And that's how you can add a clickable link navigation area to the pages on your website. Thank you very much for watching, and you have a great day.
