Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli the computer guy dot com.

Welcome back.

As you know why I'm Eli, the computer guy, and in today's class, I'm going to be showing you how to add a hyperlink into your HTML document.

So hyperlinks are dealt with in the same a tag.

Fashion is just about everything else in the HTML world.

You open a tag and you close a tag, basically, whatever is in between, that is what gets turned into a hyperlink s o.

If you want to were turned into a hyperlink, you simply put the tags around that one word.

You want entire pirate paragraph to be a hyperlink.

You put the tags around that entire paragraph or if you want something like an image to be a hyperlink, you put the ref tags around the entire image.

The attack is going to be using is something called the a ref tag.

Basically with a ref tag.

What you d'oh is you call a ref, you then say where the target is, basically where you want the person to jump when they click on the hyperlink.

So whether you want it to be to an entirely different website or whether you want it to be too another HTML document within the same folder structure that you are, you put that there on and then you have what is called the target.

So by default, the target means that when you click on the hyperlink that the new Web page that you're going to will simply open up where the old Web pages.

So this is this is what you normally see with a hyperlink.

So you click, you click on a link and the new page opens up and the old page goes away.

Well, there are are times when you might want a new page to open up, but the old page to remain where it Waas s a way that you can use an underscore blank as the target.

And basically, what will happen there is when somebody clicks the hyperlink a new window or a new tab will open up and the old window will stay open.

So in this class, we're going to be showing you how to do these hyperlinks again.

And the HTML world.

It's very easy.

You simply use the's.

A ref tags on.

With that, Let's jump in.

There's no real significant warning warning today for this particular class.

The main thing that you have to understand is how folder structure and navigation works.

When you're when you're typing in thedot path to whatever HTML file you want to open up.

So basically, if you are opening up an HTML file that's in the same directory as the HTML document that the person is interacting with, then you'll use period forward slash and then whatever that HTML document is.

If you want to go to a document that's in a lower folder, you have to be able to put in the file path properly there.

If you want to put it.

If you want the person to go into a a file that's in a directory above where you're at, you have to understand how that works.

So that's really the only thing you have to understand is again basically the various simple file and folder navigation.

When you're typing everything out beyond that, the only thing you have to remember is if you're going to be a linking to a website, eso www dot eli the computer guy dot com.

You do have to put the H T t p colon forward slash forward slash or http s colon forward slash forward slash in order to make that happen.

If you don't do that, if you simply put www dot eli the computer guy dot com or whatever the domain name is, it will.

Most likely it should it should fail for you.

Maybe it might work in some circumstances, but it should fail.

So if you're going to a website, do you make sure you put that H T T p or A B G.

P s colon forward slash forward slash And with that, let's go over the computer and show you how this works.

So here we are at my Mac book again.

In order to do any of these examples, all you need is a back basic ass key text editor.

So if you're in the Windows world, you can use no pad.

If you're back world, you can use text at it.

And if you're in the Olympics world, you can use g et it them, Nana, whatever it is, the main thing that you just simply have to remember is when you do save the document to make sure the extension is that you're not a t m or dot html.

That way, when you double click or basically you open up that document, it will open up in a Web browser.

That's the only thing you have to remember eso for.

Here I have three different examples of using the A ref tag in order to create hyperlinks.

Eso, you'll notice is here we have the p tag.

We have the P tag on down here.

We actually have the image tag.

So the first thing that you have to remember is you have to do your normal formatting for your HTML text.

Whether this is heading H one h two all the way down to 86 whether it's a P, whether it's an image, whatever else first you have to start with those tags with this we're going to have here's P and they're gonna say this is a normal link.

And so for this one word, basically, we want this one word link to be a hyperlink.

And we want this link to point to www dot eli the computer guy dot com.

So basically, all we do here as we open up this tag and with a space ref equals double quotation marks and then the path of the website that we want to go to and again make sure it's a full path.

Http or https colon forward slash forward slash www dot addic peter guy dot com on.

Then you close with the double quotation marks.

Then you put whatever you want in between the tag.

So with this, it's gonna be a single word, and that's going to be a link.

And then we're going to close that a raft tag again.

Remember to always close your tags, then beyond that for this, we're then going to close the p tag so all of this will be within one paragraph and then this sink simple word here this link word will be what the hyperlink iss again open a tag close attack.

Then if we go down here, this is a little bit different eso with this.

Basically, what I'm showing you is going to a file that is sitting within the same directory as as your hyperlink dot html document.

So I created this image dot html document for one of the previous classes that I did.

So basically, we have ah hyperlink dot html that's sitting basically on my desktop, and then image dot html is also sitting on my desktop.

So for this, when I create the hyperlink, I use a giraffe.

I don't have to put the whole https all of that in.

What I can do is I can simply reference it by period, forward slash And then whatever that document isso image dot html again, we're going to make this a link.

We're then going to close this.

We're gonna close the hyperlink tag on this goes to another page basically within the same folder structure in the final example down here, that I want to show you is is turning a an image into a hyperlink.

So let's say you want to have pictures on your page and you want those pictures to be hyper likes.

You can do that too.

Eso with this Basically what you're going to dio is you're going to have your image, um, tag here.

So this is the image tag that I talked about in a previous classes were going to do.

I am G as our C equals on.

Then we're going to basically show a picture on the page.

So this this picture is this picture down here, so it's in the same directory as this hyperlink dot html document.

So, period forward slash picture dodge a PG on.

Then I'm going to restrict the height to 300 pixels, and I'm going to restrict the with 2 300 pixels to make this small so it fits on the page.

And so this this image is then going to be within the hyperlink tag s so we have a raft equals and then again, a t g.

P s Poland forward slash forward slash www dot eli the computer guy dot com on.

Then we close the double quotation marks there.

But one of things I also did here was I created a target.

So for this target equals double quotation marks, and then we're going to say underscore blank.

So basically, when I click on this picture, it will open up www dot eli the computer guy dot com, but it will open it up in an entirely different tab s.

Oh, let's take a look at this when we open this up with a web browser.

So by double click on hyperlink dot html, this is the file that I've created.

We can see that this is what the HTML looks like when a web browser actually opens it up, eh?

So this is a normal and then you have link link, So this is a normal link.

So what we can see here is that that single word link is now the hyperlink.

Then you say this link So again, this link here goes to another page and then what you can also, What you can notice is if I go over the image, you see how when I go over the image, my little my little cursor goes from being an arrow to be in a hand, so that shows is a hyperlink.

So with this, basically, we can do is this is a normal length, So it's gonna take me to Eli computer guy dot com.

Since we did not say what the target is, It will simply open it up in the same page, basically in the same window that I'm in.

So I click on this.

We see it goes to a lot of Peter guy dot com.

And so now you like the computer guy dot com has opened.

Now I can go back, and so this link goes to another page.

So for this, I want to go this image dot html document that I created before you wanna click on that again within the same window within the same browser window, it has now opened up image dot html.

So that's basically just opened up here.

So this is this is a type of hyper like that you will create for things like menus basically navigation within your website and the final thing toe.

Look at that.

We go down here and we click on this image that I embedded.

Since that's a hyperlink will notice this time.

Wanna click on it is See how see the hyperlink dot html tab remains open.

But when I clicked on the the image as a link, it opened up.

Eli, the computer guy dot com, in an entirely different tab.

And so how you get that is again, through the target equals on, then you're going to put Underscore Blank here.

There's actually a lot of things you can do with this target.

But in general, what most people use it for is simply to be blank, then beyond that again just to kind of show you that all of this is just using, you know, normal standard HTML tags, right?

So if I wanted this to be aged one for some reason, let's I wanted that to be heading.

I can go here and again, change all that to heading, do file.

I do save.

I go here and I can refresh.

So just just so you can see, like for some people, some reason people may think that maybe each one can't have links in it.

But no, In fact, H one can be a link, just like pee can be, Um, And again, if you're looking at it and you're thinking about maybe you don't want a single word to be the hyperlink, maybe you want the whole sentence.

What I can do is something like this.

So I can just do control.

X and then I could do control V.

So now again, anything within the opening and the closing of a raft tag that will be turned into a link to file I could to save.

Come back here, I do a refresh, and now we can see that the entire sentences a link.

If I click on that, obviously goes to Eli, the computer guy dot com.

So that's a basic understanding of how these hyperlinks work again when you're gonna be pointing to a different Web site to make sure you keep the GDP or a GPS.

And if you're pointing to a file or something within within your own Web server, do you make sure you understand how that file and folder directory system works beyond that again if you don't have a target, If you don't say what the target is, then the link will simply open within whatever paid with whatever browser window you're in.

If you put a target equals underscore Blank, then the whatever link that you've clicked on that will open up in a different tab or window, depending on what you're setting.

These are within the browser, so that's all we're looking at with these hyperlinks.

So that's all there is toe putting hyperlinks into your HTML document again.

All you're using is that a raft tag?

You're saying where that a ref tag is pointing to.

Then you dump whatever you want to be a hyperlink in.

You close the a graft tag and there you go.

Now you have a hyperlink again.

You're gonna be pointing to a website.

Makes you remember GDP or https.

If you're gonna be pointing to a file within your own directory, make sure you understand how that file structure actually works.

And then again, if you want a page to open up but the current Paige to stay open, then use Target underscore blank and so that will open up the hyperlink in a new window or a new tab.

And so that could be useful from a navigation standpoint where if you don't want people to lose track of where they are in your website, you can have it open up in a blank.

That's what I try to do a lot on you, like a computer guy dot com.

So if I'm pointing you off site of Allied computer guy dot com to somewhere else.

Most of the time, I will have that open up in a blank.

So open up in a new tab or no new window.

That way, you don't lose where you're at on your computer.

Guy dot com You can go.

You can take a look at wherever you've gone, and then you can close that out and go back to where you are.

So again, this is an important thing to be thinking about again and programming the coding world.

Think about the usability of your sight and how you want people to interact with your side.

If you don't care if people lose their place on your website, that don't worry about the target.

When they click, they go off somewhere else.

That's fine.

On the other hand again, if you're doing like an educational website or some kind of reference website and you're linking two things off of your sight, you may want that open up in a blank.