Adding links

- [Instructor] Is inside my navigation. At the moment I've got portfolio, about, contact. So if I click about I want to go to the about page. So how do I actually go about doing this in our code? Well at the moment we've just got some text that says navigation in here. Which it says here. Now in my HTML docs, what I can see in here is I got this a tag. And the a tag is a special anchor tag, a for anchor, that links to other places not only on the internet but it could be files, it could be email addresses, anywhere else not on this page.

So what we're gonna do is use this special tag called the a tag to link to different things. So at the moment I've only got one page but what we'll do is we'll fix that a little bit later. So I'm gonna get rid of the word navigation here. So I've just got this group, this nav tag, that's only got, it's only empty at the moment. So what I'm gonna do is just press enter to add more space in between that. Then you can see I've got header which goes from here to here, and then nav which goes from here to here.

Look for the yellow box, see if we're in the right place. So I'm gonna move my cursor in here and I'm gonna press tab, just to move my cursor in a little bit. The reason for that is just to make my code a little bit easier to read. And here, what I'm gonna write is this a tag, it's a special tag. Now what is the first text that we have in here? We have portfolio, about and contact. So the first link that I want to put on this page is portfolio.

If I spell it correctly it would help. So this inside my nav has a link to portfolio. Let's just double check, here we go. Again, if you do wanna open this up in a new tab there we go. You see portfolio there, you can just refresh whenever done. Make that a little bit bigger. So for now what I'm gonna do is add the next link inside here. Now I wanna also keep this in my nav, so how would I place this? So it's not inside this link, but it's still within my navigation.

So I've just pressed enter and made this yellow box a little bit bigger. And in here what I'm gonna do is add another a tag. A tag, about. And underneath this still within my nav tag I wanna add one more link. A to a contact page. So I've got portfolio, about and contact. So I'm grouping it one, two and three. Now if we look at what we've done here, this kind of reflects what we have in here, we have a site header with the navigation, and inside navigation there's three text boxes, one, two, three.

Just like we have, we have a site header, with the navigation, with three text boxes in there. So we're trying basically replicate what we have in Figma here. Now there's one thing that we wanna add in. Now you might have noticed this automatically was added as index dot HTML. Index dot HTML is a special file name, it's always used as the first page that people see. So you notice in my URL there isn't anything that says splash index dot HTML for instance.

This is what is expected. So don't rename this to home dot HTML or portfolio dot HTML. However, any other pages that we add such as about or contact is up to us. So here what I can do is add a new page called about dot HTML. So dot HTML is just an extension just like we have dot PDF or dot MP3. Kind of maps to that so let's just enter there. Now the moment this is empty in my about dot HTML let's just write the word about page, or about page here.

Not worried too much about the content. We're also gonna enter another page in here called contact dot HTML as well. This is gonna be unsurprisingly our contact page. Contact page. There we go. Now at the moment if I go to my page, I've got portfolio, about and contact. And at the moment they're not clickable, even if I refresh I can't click on them.

Why? Well at the moment if we go back to our index dot HTML they're just text boxed. How do I actually add a link between this, or about, or contact, to the relevant page? Well it doesn't know. Well if I just write something like contact dot HTML. Again that doesn't really mean anything. The browser doesn't know what we mean there. And it could be contact me dot HTML and it's completely different.

What I wanna do is add some more information on the first a tag for each one. I can add some extra special information by putting my cursor just after the a. So just after the a, before the angle bracket stops, I'm gonna add a space. Now what I'm gonna put here is a special term. Now you can see the special term if you look here. It looks for a href attribute. Now what does that even mean? Well an attribute is just some extra information the browser can use to know what is going on.

And the special word is href, so we're just gonna add that in. H, R, E, F. Href stands for hypertext reference. Hypertext very 80s kind of word that stuck because this is when HTML was made. And href just means that a link into other places. Now href, what does this equal to? Like where am I going here? Well this is gonna be equal to, in quotes, no spaces here, index dot HTML.

So the first page portfolio should link to index dot HTML. Which is my current page. I wanna do this same thing for about. So here, after my a, I'm gonna do a space with href equals in quotes. Where does this go to? Well this one we wanna go from this page, index dot HTML, over to about dot HTML. And the same thing for contact. So I'm gonna put my cursor just after the a, and put href equals in quotes contact dot HTML.

So now what I've done is added a special kind of like extra bit of information to the browser to say, "Hey, like don't tell anyone but this should go to about dot HTML." We're not actually seeing this anywhere in our content, it's a browser instruction. So if I go back to my preview, or I go up to my draft page, you can see here that they link up. So if I click about I'll go up to the about page. Obviously I don't have any navigation on the about page yet, we'll talk about that a little bit later.

And if I go to contact I'll go to my contact page. Did I put anything in here? Maybe it didn't save. Let's just try that. There it is. And I have to press the back button to get back. But what we have here is a way to link around our site. If I wanna link to some other page completely, I have to put in the full URL. So for instance if I wanna go to superhi dot com, all I need to do is but the full URL in here.

So now what I'll have is portfolio, about, contact. And this will go to the final page. Can't just put superhi dot com, I need to put the full URL ncluding HTTP, HTTPS in here as well. Now for us, our page is kind of its own so it is just contact dot HTML. We'll keep it as it is for now. But this is giving us some structure that we can work with. Next what we wanna talk about is some of the style of this. How do we actually go from just plain content to something that looks a little bit more like this.

To do that we'll talk about CSS.