edutechional's video: HTML Tutorial: How Hyperlinks Work - HTML for Beginners

In this tutorial, we're going to walk through how hyperlinks work in HTML. Right here, you can see in the finished product, we have these navigation elements and 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 and 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 were a very far distance away from here, but 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 kind of sample code items. I'm going to get rid of styles, too, and everything else here and 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, but 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, so it's very clearly nested inside. Now, with all that in place, let's also update the title. This is going to say Homepage and 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 a 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, so go to the menu bar, click on new document and say about.html and then you can paste that in 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. 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 because, 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 because 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 two dot html, three, four, five and six dot html. That's not very clear because 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. Last one is going to be contact and hit save. Now, if we come back here, now 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 nav bar, is we are going to use what is called an A-tag, so 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... Read the full guide: https://www.crondose.com/2018/08/html5-for-beginners-tutorial-html-link-example/ Follow me: Twitter: https://twitter.com/jordanhudgens Instagram: https://www.instagram.com/jordanhudgens/ GitHub: http://github.com/jordanhudgens