How to make a clickable link in html & change the color

Good afternoon, it is time to talk about Hyperlinks. Sometimes that are called hrefs or h-tags. They are clickable links. Like this 'Make  Reservation', we're going to add it, and when you click it, in this case it's going to open up a new tab. It's going to go to Google, because I haven't got a good place for it to go to, but that's what we're going to do. We're going to do one both by itself and in line with the text at the top here. Let's jump in and work out the ways of the hyperlink. 

To add a link it's going to be this fella here, called Make Reservation. It's called a hyperlink, so let's add it to VS code. It's actually referred to as href. So where do we want it? I want it after my P-tag. And you notice, my wrapping's turned off. It turns off every time you close the program down. So in between videos, I was going to go home, and I was like, "No, I'll do one more video tonight before I head home." So I closed down VS code, opened a backup, and the wrapping's gone. And it's, I guess a good thing to show. It's got a pretty easy shortcut, if you can bother remembering it. 

So I'm going to put mine just under the P-tag here. And what is it? It's an A-tag. So if I type in As and hit 'Return', it puts in all the stuff we need. So it needs a h-reference. And in between the quote marks, like most of the things in here, is where we put the link we want it to go. So in this case we'll get it to go to a-- I'm going to use something in Yup, so I'll pause it here and I'll be back in a second with a link. All right, I'm back, just with a random restaurant account in Adare. Random, I went there once, I really liked the food, Neville's Cross.
 
Anyway, so I've grabbed a link for us to go to. So we're going to go back into Visual Studio Code. So when somebody clicks this button, it's going to go weird. You could type in http: We should have just done that www, you need all the junk. It's best to have all the junk, so http://www. and the URL. That's where this button's going to go. Because I went through all that hassle and found a link,. I'm going to type it in even though it's really big. 

Now at the moment it's not going to really do anything. So I'm going to save it, preview. Let's have a look. So it doesn't work. It needs some text, and the text goes in this A-tag, so there's an opening, and you can see the two little curly braces. Like between the two H1 tags, we're going to go between these A tags and we're going to have Make Reservation. That will work. So I just typed in, it can be anything, just text, like the P-tag, but because you've wrapped that up in this href tag nothing happens. Let's save. Nothing happens. Ooh, this brings up a good point. Remember I said I closed down VS code? So I closed down VS code but I didn't close down this, like preview window. 

Remember the-- what was it called, Live Server. So this brings up a good point. I just assumed it was still connected, I know it doesn't, but I forget. So I closed down Visual Studio Code, opened a backup, and that connection broke between those two. I'll leave this in the video because it's a good point, right? So what I'm going to do is go live again. It's going to start up a new page. There's my old one that's no longer connected. I'm going to close it down. There's my Trip Advisor. And now it's connected, there it is. Cool. 

Now it could be blue, mine's purple because I've been to that link before, but give it a click. Loads it up and there's that lovely Trip Advisor. So that is how you add a URL. We'll do some styling in a second as well. One thing you might want to do though is, when you click on it, at the moment it clicks on it, and it's actually going to, it's replacing that page with this so you can't really go back easily. So what you do is there's an option in your href. What we might do is get rid of that hole. I feel like it's made it look ugly. It's more about making it look nice for you. 

So let's just put in Google. google.com So all you need to do is, after the href, so A-tag is the thing we're using. href is just a part of it, so after this, we're going to add something called target equals blank. Actually I think it needs to be underscore blank. You double check that. Let's give it a preview, try to guess here, remember. Save it all, preview it in a browser. Let's give it a click, and it does work. Cool. So if you add that underscore blank, can you see what it did? It left that tab there and launched this link in an own tab. Sometimes the zone window, you can't really control that, but if you just add target blank, can do that. In this case it's not what I want, but it's going to be something that I'll tie into this video, so you can come back to it. I'll leave it in there, let's leave it there.

The other thing to note is that when you are doing URLs, let's say this wants to go to another page on this website. Often you don't know what that is yet, you're like, "Is it going to be the About Us page?" .html, but you don't have that yet, so what people tend to do as developers, is you put in a hash, '#'. Up near the 3 key. The pound symbol, hash, whatever you want to call it. What that does is that's a really good place holder. It's kind of clear that that's a placeholder. If you leave it blank often what can happen is, it can throw an error so if you leave it-- not sure if Chrome does that anymore. Let's check. Just kind of launches it in its own window, that's fine. 

So we're going to write, but some browsers freak out if there's no link in there, so you put in hash. I show you that because that's really common to have. You might get a template website from someone else, and they've left hashes in there, and you're like, "What are those?" That's just placeholders so that when the button is clicked it doesn't throw an error. So we'll leave hash in there, now let's go back to Google. Now let's style this. I want you to pause right now and do a little pop quiz. How would I style it? Just think it through, you don't actually have to do it, you could do it, that would be cool, but I want you to see if you can style this thing. 

The first thing I want you to do is make it white, because it's purple at the moment. Sometimes it's blue if it hasn't been clicked yet, I want you to do that. Did you have a think? Don't worry, it's early for thinking, or late in the afternoon for me. So it's the A-tag. So A over here, I'm going to say, color please, is going to be white. It's going to change the color of it. Also we'll say, I want the font family to be the same as the rest of it. So I'm going to type in all of that. You can see, now that I'm not going as slow as I did in the beginning of the class, you can actually add code quite fast using all those helpful little hints. If I'm going a little fast, sorry, but we've done that a few times now. Let's have a look. Yeah, it's the right color, it's the right, font. 

We're going to leave that underline because I want it here, because I feel like, sometimes if it's not very clearly a clickable button, you need to leave the underline, but let's say it's not, and you want to get rid of it. It's a weird thing, it's called Text Decoration. Kind of makes sense but it's also kind of weird, and you want to set it to 'None'. So 'Text Decoration', 'None' will get rid of the underline. I want the underline. I'll leave this in the code here for you. I'll just comment it out. I'm going to do that a little bit more in this course so that the things that I've shown you will be in the saved Completed Files, but even though I don't want to use them myself. 

Now the other thing to know about this hyperlink, we did it as its own kind of separate tags, so it's ended up kind of hanging down the bottom here. Let's say you want to make this word, like the word satisfying, a link. Let's use the word Adare. So people can click on it and it goes to a map of Adare. So, where's Adare? I'm just going to put some spaces just to clear a hole. I don't want there to be spaces but I want to make it clear for you. Remember, the same thing, A-tag, which is an A, when I hit 'Return', puts it in there. Where's it going to go to? Don't know yet, it's going to go to hash, and inside the brackets here what do I want to appear? I'm going to grab this, come here, Adare. It's going to go inside there. Let's save it, let's check it. 

You can see, it's underlined. It's being told what to do in terms of the A-tag. So the A-tag still refers to both this one and this one, and it's adding the underline, and it's in the text. So this one is called Inline. This is an Inline href, or an A-tag, or a hyperlink. All the names for the same thing. A, what does A stand for? I think it's active link, maybe we should check, but because it's placed in the flow of this P-tag it would just flow along. This, because it's placed by itself outside of the P-tag, it hangs out by itself, so you don't have to actually do anything. Do you notice, see all those spaces? Didn't change anything. You see I just added in there to make it look tidy, but put back. All right, that is the crash course on hyperlinks. Let's get into the next video.