How to link web pages?

Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott,  and I'm a trainer here at Bring Your Own Laptop. This training course is for people new to web design  and new to Dreamweaver. Okay, in this topic we're gonna look at hyperlinks. Now what a hyperlink is, A hyperlink is  normally just referred to as a link, okay? But the technical names are hyperlink.

So, um, all it is is a way of linking one page to another. And that can be internally, okay? So it can be a page, um, like a navigation. So going to your contact us page, your about us page  to your product pages, um,  or it can be a link to another site. So a link to an external site. And that's what we're gonna be doing in this exercise.

We'll look at doing navigation in a later tutorial. But in this one, let's look at doing a hyperlink. We're gonna turn this part of the website down here  where it says site design buy, and it's got my name, okay? I'm gonna get it to link to my website, okay? So when people click on it, it'll jump out to my website. Okay?

So first of all we need  to do is highlight this bit of text. So I've highlighted the word senior water Scott,  and there's two ways of doing it. I'll show you the first way, which is a nice, simple way. It's under insert it, okay? And under hyperlink. Okay?

So if you click on insert, click on hyperlink, okay? We'll get this little window. Let's put the text through. Nice and easy. Now the link, this is where it's going. Now I want mine to link to an external website, okay?

And what we need to do is put in the full URL address,  which means I need to put in all the junk at the beginning,  which is http colon slash  slash, okay? So you need to make sure all of that goes in, okay? Sometimes it's easy just to copy  and paste from Google's URL, okay? Or, um, yeah. So what we're gonna do in this one is let's get to go  to bring your own laptop. Okay?

It's where I work as a trainer and Target. Okay? Target, you've got a couple of options. You've got two options. You've got blank and self. Self will mean when somebody clicks this link,  the page will reload on top of itself.

So the old one will disappear and the new one will appear. And that's really good for internal navigation. So once again, clicking on your product pages  or your contact up to us page, what we want  for this one is we want blank. Because what this will do is when I click on this link,  it'll actually leave the current window there  and open up a separate window. Either open a in a separate window or in a separate tab. Now in Google, Chrome and Firefox, it opens up in a new tab  and in Internet Explorer,  and I think Safari as well opens up a brand new window,  which is, you can't control that, okay?

But, um, so you got blank  or self if I leave this empty, okay,  but nothing in the target, okay? It will default to self. Okay? But, so for this one, I want it to go to blank. Now, the title's really important. It's two, it's important for two reasons.

One is for screen readers, which means that people  that are visually impaired, they use a program  to read websites. And what it does is it reads them, um,  what's going on on the page. And it'll get to this link,  Daniel Water Scott, and read the title. And this will be descriptive, okay? Telling where it goes. So this is gonna be my web design company, okay?

So say somebody really likes this lovely,  beautiful design I've done, okay, even though it's  times in Roman and Black, okay? When they click on this link, um,  it will take them to this website. And this is this, this is the stuff they  get read out to the screen reader. Now that's one reason. The second reason is  that Google uses this to help understand  where, where it's off to. Okay?

So what you wanna do is make sure  you use good keywords. It's good for your, um, SEO,  your search engine optimization, okay? So make sure you use clear,  good keywords describing where it's going. Now in this case, 'cause it's going  to our Adobe training site, this would be a, uh,  not a particularly good title  'cause Google's gonna follow this link  and be expecting a web design company,  but find an Adobe training center, okay? So, um, make sure you use good titles in there. Now we don't use access key and tab index.

Let's click okay. Alright, so you can see here, um,  my text has gone on a lovely shade of blue  and it's underlined, okay? That's the default colors for a hyperlink or just a link. Now we're gonna look at styling, uh, fonts later in,  uh, tutorial series. So at the moment we're just gonna have to leave them  as the blue and the underline. So that's one way of doing it.

The other way of doing it, okay? A hyperlink. So the first way was under insert, okay? Was under insert and hyperlink. I'm gonna show you another way, and this is the way I use,  it's a little quicker, but when you're learning the insert  hyperlink option is, is is nice and simple. What I like to do is say,  I wanna turn this word into a hyperlink.

I'm just gonna use the properties  panel down the bottom here. So I'll zoom in a little bit  so you can see the properties panel has, um,  much the same features. Okay? So it has link, title, and target. So the link's gonna go to remember http slash slash dub,  bring your own laptop.com  au, spell it right? The title is describing where this goes.

So it's going to an Adobe training  company and the target. Anybody remember if I leave it blank, what does it do? That's right, it goes itself okay,  but in this case, I'd like it to go to blank,  which means it's gonna open itself up in a separate window. So that's, uh, the exact same way as doing it up here. Okay? Except it cuts out one la one, one more step.

You see it's gone blue. Where is he? He's gone. Blue, he's underlined. So they do the same process. Now if you have to edit any of these links, say  that you decide that um, this Daniel,  Walter Scott here's going to the wrong place.

There's um, you can't use the insert hyperlink to edit it. Okay? What you have to do is edit it down  here in the second way. So you can see there's my, um, u rl,  there's my title and there's the page. So I to go through and adjust it, say  to our New Zealand website. So instead of.com au go to.com nz sorry.co nz.

Okay, so let's preview it. So I'm gonna go to file and save. That's preview in a browser. So you've got two ways. You've got file preview in a  browser and you get to pick from here. There's another way here.

So there's a little globe, okay, this little globe here,  this little globe here will, um, does the exact same thing,  just saving a little, one extra little click. So I'm gonna use preview and chrome, zoom out, okay? You can see I've got a link down here. I've got a link over here. So if I click this one down here, this one should go  to bring your laptop New Zealand. There it is.

Lovely. Okay. But you can see it's opened it up in a separate tab. There's my first tab, there's the second tab there. So that's the use of blank. Blank will open up in a separate tab if I did self.

Okay, let's go through and show you in Dreamweaver. I'll change this link here instead of blank. I'll change it to self. I'll show you the difference. I'll preview it again in the browser. Okay, so this one here opens up a new tab.

This one here, replace the tab that it was at. Okay? So it's up to you whether you want it blank and self. So blank is really useful for external links  and self is uh, tends to be used for internal navigation. Hey, me. Alright, jump back into Dreamweaver.

So that was the tutorial showing you how a hyperlink works. Okay? So normally just refer to as a link. All right, that's the end of the tutorial. Let's get onto the next one.