Production Video - Fonts Linking pages in Dreamweaver using hyperlinks

Hi my name is Dan and in this video we are going to look at hyperlinks. Now hyperlinks is just a word used for links. So when you say down here where we've got the terms and conditions. We want it to link to either an external page so maybe linking off to say Google.com or linking to another one of your websites or linking internally the exact same process works. So lets look at an external link first to test our little hyperlinks. Now to do it, if I click in here, and I add a link down here, it will add it to the whole p tag. What I want to do is add it to just a small part of the text. So what I need to do is double click and get in there. So I want to say, highlight this one where it says “bring your own laptop ltd 2016”, if I double click it, it goes orange so I know I'm in kind of text editing mode.

Now if I highlight anything in here, I get this little icon, this little chain link icon, this is adding a hyperlink or an href. Lets click it, where am I going to go to? Put in the full url so http//www, I know I'm going to get it to go to bring your own laptop.com, and hit enter, great. To go and preview this one I'm going to preview it in a browser. So I'm going to go to this little globe down here and I'm going to go preview in Google Chrome. Or you can use the file, preview in browser, the exact same place, the exact same destination, lets go to Google Chrome. I'm going to hit save, scroll down to my bottom here, and you can see there’s a link, it’s got a different colour but we can talk about that later. And if I highlight it, it goes even darker. But if I click it, its going to jump off to that specific website. So that’s an external link, jumping out to that. All right and that’s an external link, so its jumping from my website out to another website.

We are going to look at internal navigation later on; it’s the exact same thing except we are using an internal link but we are going to look at that later on when we start doing our mobile navigation. The next thing we are going to look at is a placeholder link. It just means that; say that I want to have this as a hyperlink, the word print to jump to my print page. But I don’t know what, I haven’t even created my print page yet, so I want it to be a link but, and I want to start styling which we are going to do in the next video, but I have no idea what I'm going to call it and those types of things. So what you can do is just put a placeholder link, its very easy. So I'm going to highlight the word print and I'm going to click the linking icon and all I'm going to do in here is type a hash or a pound symbol depending on what you want to call that one. And I hit enter. All it means is it turns it into a link but it doesn’t come up with an error.

So if you're sending this to a client and you're getting them to proof the homepage and you put in a random url and it starts jumping to weird pages or pages that don’t exist yet and come up with errors, they are going to complain. So if you just put in a hash or a pound sign, it just means that it’s going to become a link or its going to operate like a link so I can start styling it and its not going to go anywhere, so there’s not going to be any errors. So I'm going to preview that in my browser, file, preview in browser, Google Chrome, save. And you can see down here, it’s a link, it works, but when I click it, it doesn’t go anywhere, I'm still on the same page. So use those hashes when you are styling it, add hashes to this one as well. So select it, make sure it goes orange, link it, hash and do the same for this one, link, hash that was a three. And I’ll do it or this one here, so anything you want to be a link, put in hash, you’ve got to remember obviously later on when you’ve got these pages to link them to you’ve got to change them from hash to their actually page name but we will do that later together.

Next thing we will look at is styling these from the default colours. All right so that’s what a hyperlink is and how to link to an external site and how to make a placeholder link.