How to link web pages?

Dreamweaver tutorial 06: How to link pages using hyperlinks.

Hi, Welcome, My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: Hyperlinks.

A Hyperlink is normally just referred to as a ‘link’. Hyperlink is the technical term. All it is is a way of linking one page to another. This can be internally, it can be a page like a navigation, going to your contact us page, about us page or product pages. Or it can a link to another site, an external site. This is what we are going to look at in this tutorial (we will look at navigation in a later tutorial).
Let’s look at doing a hyperlink. In this part where it says ‘site designed by….’ Im going to get it to link to my website. So when people click on it it will jump out to my website.

Creating a hyperlink

First highlight this piece of text. So highlighting ‘Daniel Walter Scott’. There are two ways of doing it. There’s the nice simple way. I just go to ‘insert’ – ‘hyperlink’- you get this window to put the text through nice and easily. Now, the link, this is where it is going . I want mine to link to an external website. So in here we have to put the full URL address. I need to put in ‘http://www’. Sometimes it’s easy to just copy from Google’s URL. So in here we are going to put in ‘http://www.byol.com.au’

What is a hyperlink target _blank or _self?

In ‘Target’ you have 2 options: ‘Blank’ and ‘Self’. ‘Self’ means when someone clicks this link, the page will reload on top of itself. So the old one will dissappear and the new one will appear. That’s really good for internal navigation. So clicking on your ‘contact us’ page or your ‘product’ page. What we want for this one is ‘blank’. What this will do is when I click on this link, it will leave the current window there and open up a separate window. Either open up in a second window, or a separate tab. In Google Chrome and Fire Fox it opens up a new tab, but in Internet Explorer and I think Safari, it opens up in a new window. If I leave this empty, put nothing in the target, it will default to ‘self’.

What is the hyperlink title for?

The title is really important. For two reasons. One reason is for screen readers. People who are visually impaired, use a programme to read websites and it reads them what is going on in the page. It will get to this link, ‘Daniel Walter Scott’ and read the title, it will be descriptive, telling them where it goes. So this will be my ‘Web Design Company’. So if someone really lkes this lovely design I have done, when they click on this link it will take them to this website and this is the stuff they get read out to them by the screen reader.

Google likes link titles

The second reason that a title is really important is that google uses this to help them understand where it’s off to. So it’s really important to use good clear key words for your search engine optimization. So use good clear key words describing where it’s going. Now in this case, because it’s going to our Adobe training site, this would not be a particularly good title. Because Google would follow this link expecting to find a web design company and instead find an Adobe training centre. So make sure you use good title key words. Now we don’t use ‘access key’ and ‘tab index’, so let’s click ‘ok’.

So you can see here, my text is gone blue and it is underlined. That is the default colours for a link. Now we are going to look at stylising and colours in a later tutorial. But at the moment just leave them as blue and underlined. Thats one way of doing a hyperlink. ‘Insert and hyperlink’. It’s nice and simple when you’re new.

Making hyperlink the advanced way

The other way. If I wanted to change this word in to a hyperlink, I’d look at the property panel down here. It has much the same features ‘link’, ‘title’ and ‘target’. So the link is going to go to’ http://www. bringyourownlaptop.com.au’. The ‘title’ is explaining where this goes, it goes to adobe training centre. And the ‘target’, if I leave it at default it goes to ‘self’ but in this case I’m going to put it as ‘blank’, which means it will open itself up in a separate window. So that’s the same way as the way we did it earlier but it cuts out one step. See it’s gone blue and underlined so it is the same.

Changing a hyperlink in Dreamweaver

If you need to edit any of these links. If you decide that this ‘DWS’ is going to the wrong place. You can’t use the first way (insert hyperlink) to edit it. You have to edit it in this second way. There’s my url, title and the page. So I’d go through to adjust it, let’s say to our NZ website. So I’d change it to ‘.co.nz. ‘

So let’s preview it. Go to ‘File’- ‘Save’. Then there are 2 ways to preview it. You can go to ‘File’ then preview it in a browser, you get to pick from here. There’s another way, using this globe. it does the same thing. Use preview in chrome, and click this link down here. It goes to Bring Your Own Laptop New Zealand. You can see it has opened it up in a separate tab. That’s what happens when I use ‘blank’. If I used ‘self’ it replaces the tab that I was at. Blank is useful for external links and ‘self’ tends to be used for internal navigation.