Good afternoon. It is time to talk about hyperlinks and sometimes they're called h refs or a tags. They are clickable links. Okay Like this, make a reservation we're gonna edit and when they 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 gonna do. We're gonna do one both by itself and in line with the takes up the top here, let's jump in and work out the ways of the hyperlink. Alright, to add our link, it's going to be this fella here called make reservation. Okay. It's called a hyperlink. So let's add it to the S code. It's actually referred to as an H ref. Okay, so where do we want it? I want it after my P. Tag and you'll notice my wrappings turned off. It turns off every time you close the program down. So in between videos I was gonna go home and then I was like no I'll do one more video tonight before I head home. And so I closed down the S code. Open it back up and wrappin...

g is gone and it's a I guess a good thing to show that it's got a pretty easy shortcut if you can be bothered remembering it. Um So I'm gonna put mine just under the P. Tag here and what is it? It's an a tag. Okay. So if I type in a and hit return, it puts in all the stuff we need. Okay, so it needs a reference and in between the quote marks. Like, like most of the things in here is where we put the link we wanted to go. So in this case we'll get it to go to, I'm going to use something in yelp. So I'll pause it here and I'll be back in a second with a link. Alright, I'm back just with a random restaurant I found in the Deer. Random I went there once. I really like 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, okay, it's going to go weird. You could type in http colon, we should have just done that Dub, dub, dub. You need all the junk. Okay. It's best to have all the junk. So http colon slash slash dubbed dubbed dubbed dot and the U. R. L. Okay, that's where this button is going to go because I went to all that hassle and found a link. I'm gonna type it in even though it's really big. Okay, now at the moment is not going to really do anything. So I'm gonna save it preview. Let's have a look. So it doesn't work. Okay. 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 like between the two A. H one tags. We're going to go between these a tags and we're gonna have to make a reservation that'll work. So I just hope that it could be anything. It's just text like the P. Tag but because you've wrapped it up in this eight ref tag, nothing happens, it's saved. No, nothing happens. Oh this brings up a good point. Okay remember I said I closed down V. S. Code. Okay so I closed down the S code but I didn't close down this like preview window. Remember the um what's it called? Live server? Okay so this brings up a good point. I just assumed it was still connected. I know it doesn't but I forget. Okay so I closed on visual studio code. Open it back up and that connection broke between those two. I'll leave this in the video because it's that's a good point. Right? So what I'm gonna do is go live again, it's going to start up a new page, There's my old one that's no longer connected. Can you 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. Okay so that is how to add the U. R. L. 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 H R. F. What we might do is get rid of that hole. I feel like it's made it look ugly and I'm all about making it look nice for you. So let's just put in google google dot com. Okay. So what all you need to do is after the H ref. So a tag is the thing we're using a H. F is just a part of it. So after this we're gonna add something called Target equals blank. Actually, I think it needs to be underscored blank. Hmm I need to double check that. Let's give it a preview trying to guess here. Remember, save it all preview in a browser and 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. Okay. Sometimes its own window, you can't really control that. But if you just add target blank, you can do that in this case. It's not what I want, but it's going to be something that will tie into this video so you can come back to it. I'll leave it in there, let's leave it in there. And the other thing to note is that when you are doing murals, 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 gonna be the about us page? Okay. Dot html. But you don't have that yet. So what people tend to do as developers is you put in a hash Okay. Up near the three key. Okay. The pound symbol hash what do 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 and if you leave it blank often, what can happen is it can throw an error. So if you leave it, I'm not sure if chrome does an error anymore. Let's check. Just kind of launches it in its own window. That's fine. It's working all right, okay. But some browsers freak out if there's no link in there so you put in hash, I'll 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 one of those that just placeholders so that when the button is clicked it doesn't throw an error. Cool. Alright, so we'll leave hash in there now let's go back to google. Alright now let's style this. Okay, I want you to pause right now and do a little pop quiz. How would I style? Let's just think it through. You don't actually have to do it. You could do, it would be cool. Okay. But I want you to see if you can style this thing and 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 gay or late in the afternoon for me. So it's the tech a over here. I'm going to say color please is going to be white. Cool. And that's going to change the color of it. And also will say I want the font family to be the same as the rest of it. So I'm gonna type in all 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 like helpful little hints and if I'm going a little fast, sorry. And but we've done that a few times now. Let's have a look. Yeah, it's the right color, it's the right um, font and we're going to leave the 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 it's also kind of weird and you want to set it to none. So text decoration, none will get rid of the underlying there. Um I want the underline. I'll leave this in the code here for you. Okay, so I'll just comment it out. I'm going to do that a little bit more in this course. So that things that I've shown you, okay, we'll 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 is its own kind of like 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. Okay, a link let's use let's use the word of deer so people can click on it and it goes to a map of a deer. So where is it? And so I'm just gonna put some spaces just clear a hole. I don't want them to be spaces, but I want to make it clear for you. We did the same thing. A tag. Okay, Which is an A. And that return puts it in there. Where is it going to go to? I don't know yet. It's gonna go to hash and inside the brackets here. What I want to appear. Gonna grab this, come here dear. It's going to go inside of there. Let's leave it, let's check it and you can see it's underlined. Okay? It's being told what to do in terms of the a tag, the tag still refers to the both this one and this one. Okay. And it's adding the underline and it's in the text. So this one is called in line. Okay. This is an in line um h ref or an a tag or hyperlink loads and aims for the same thing. A what is a stand for? I think it's active link and we should check and but because it's placed in the flow of P 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, you know, to steal those spaces. Didn't change anything. You see, I just added in there to make it look tidy but I'll put it back in. Alright. That is the crash course on hyperlinks. Let's get into the next video

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

Make a Clickable Link

Make a Clickable Link

Lesson Info

22. Make a Clickable Link

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks