Name: HTML介紹--超鏈接導航 (HTML Intro - Hyperlink Navigation)
Uploaded: 2021-01-14T10:43:51.000Z
Duration: 15 min 17 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

程度副詞

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.

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.

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.

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 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.

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.

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 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.

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.

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.

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.