Build a Website - Inserting Hyperlinks

Kevin Frey: Hi! I'm Kevin Frey from TransEffect LLC and today we're talking about how to create a website. In this segment, we're going to be discussing hyperlinks. Hyperlinks are what enable your users to navigate through your site and also to get to other external websites as well as to get people to other documents or images within your site or other websites.

We're going to start by taking a look at a few examples here. On the I Heart Planes website that I've created here, I've got a couple of links. We click one, the About Me link, you'll find that it makes me to the About Me page. This page obviously has some different content, it's a whole different page.

So what we're going to do is we're going to set up the hyperlinks in Dreamweaver. We're using the sidebars or navigation so. This is the header and this content is going away. Here is the first link, the second link, third link and fourth link. You can see that they're just text like any other text in a paragraph here but we're going to select the About Me and right now it's in paragraph tags because it's set up as it's in paragraph but we're going to make this a hyperlink.

The text is About Me and the link is going to go to about_me.

html which is a file that does not exist yet. But we'll create it here. There it is. There is the link and you can see that the A or Anchor tag is what sets up the link. The HREF tells your page and tells the browser which file to go to and if you remember, the HREF had the same purpose here in describing where our style sheet is located. So HREF is always used to give a location of something. By default, when you make text a hyperlink it becomes underlined and colored, typically blue to indicate that it is a clickable link and if you click it will take you elsewhere.

Now that we've just created a link, let's talk about the About Me page. The downside is when you're making a site that's completely HTML based and it's going to have multiple pages, it's necessary to decide how the page is going to look before you start saving multiple pages. Because if you want the pages to look the same then you've got to create one page that looks the way you want the pages to look and then save copy to that page and change the main text.

The downside is for instance if I save this page as home.

html for instance. This is home.

html. If I also -- you know if I want to create the about_me.

html here, let's do this, Home. Now what I would do is I would save this as about_me.

html and you're going to find that if go back to home. While here let's change this to About Me and resave it.

Here's our Home page and we've set up the About Me page. If we go to File and Preview in Browser, this will give us the choice of the browsers we have installed in our system. I like to use is Firefox. So I'll click on Firefox and here's our Home page. Here is the About Me link. It loads the About Me page when you click there.

Now the downside of this system is now that we have two pages set up, if I want to change something in the Header, I have to edit both HTML pages. So what we want to do really is we want to forget about about_me.

html and we want to finish the look of the Home page before we start saving other pages.

So we're creating our template. We've got a link on our actual page, go and search for a maroon color. So let's talk about changing the colors of the links. Now in Dreamweaver and in similar programs, you can actually go to your Page Properties and this is something I've seen in every What You See Is What You Get editor that I've had experience with. You can actually change your default link color here to whatever you like and you'll see that this changes.

Now if you want to -- once the link has been visited you can change that to a different color. We'll go ahead and keep that gray. If you want the link to change color when you put your mouse over it, you can set a color for that too and for it to change color when you click on it. We'll just make that also red.

Go back to Preview in Browser, save our changes and it's a visited link so it's gray. But when you mouse over it's green like we set. If you were to clear out your history so that the browser didn't know that you've been to that link, it would be red like our default links are now. These changes to the links just like other style changes occur in the Style Sheet and the HTML is not altered in any way.

That just about covers it for the links. Next we're going to talk about changing background colors and inserting images.