Linking
Now that you've got the hang of messing with text, it's time to learn how to link using text. We will also go in-depth about other kinds of linking as well.
• As you can see in the above code, it only says hello.html without the http part. This is called a relative link. It only links a text or an image to other files within one server. I'm not sure if you know what I am talking about, so I'll explain. You know that account you've signed up for already? Yeah, I assume this is where you are building your html files. Inside your site building website is a page called the file manager. This file manager lets you work with all the files you have created and uploaded to your account. The list of items in your file manager are the only items you can link to in a relative link.
• Now, you're asking how to link to other sites on the internet. Simple, you use absolute linking. In absolute linking, all you need to do is type the entire address into the value including all the http and the www stuff. A simple absolute text link is included below.
• I'm sure you've noticed that the last link opened up in a new browser instead of inside this tiny table box. Here's where I introduce the other attribute 'target'. This allows you open up links in different locations. I'm going to list the target names below. Their definitions are listed after the list.
• The blank target opens the page up in a new browser. The self target opens in the same window where the link is. You don't need to put a target if that's what you want it to do. The parent target opens the page in the parent's frameset (when using frames). The top target opens the page in the full window, overriding any existing frames.
• Now that you've gotten used to text linking, you might want to try linking images. It's not that much more difficult. You haven't gotten to the image part of the html lesson, so I don't expect you to know this right after you read it. The image element is called img and using one of its attributes called src, you can put a picture on your site. See what it looks like below. Click on the picture to go to the random page I made before.
<a href='hello.html'></a> <img src='hello.gif'></a>
• See that border around the image? Don't like it? Well, in the images tutorial, you'll learn how to get rid of it.
• Now, on to intrapage linking. Not sure what that is? I'm sure you've seen it used on some websites before though. Ever notice that on some sites, when you click on a link, it goes somewhere else on that same page? If you haven't, take a look at the front page for the learn html session and I'm sure you'll see what I mean. Be sure to click on one of the first three links though. Intrapage linking is a nice tool to use if you decide to put everything on one site and instead of forcing your visitors to scroll all the way down the page, set up intrapage links to get them there quicker. Here's an example below. It incorporates the anchor attributes 'name' and 'href'.
• Next you'll need to specify where the top is. Using the name attribute, you can put the top of the page anywhere in the html you deem appropriate as long as it's in the vicinity of the area to you want it to go to. Here's an example of this attribute being used.
<a name='Top'>Linking</a>
• I'm sure you noticed that's where I put mine so that the top link would go to the top of the page where the title "LINKING" is. Don't forget that when you use the this function, to put the number sign in front of the href name so that the html reads it as within the page an not elsewhere.
• Now, on to email linking. You want comments or suggestions from your site visitors, and you want them to send an email directly to you, right? Well, it's quite simple. Using this command, the browser will read it as a demand to send an email and will open up whatever email service you use and put the email address you want forwarded it to in the to: section. That probably didn't make much sense. Just take a look at the following link and you'll see what I mean.
<a href='mailto:dreamlight_destiny@hotmail.com'>Click here to email the Angel Senshi</a>
rel - describes the relationship with current document
rev - reverse link
type - type attribute designate content type
media - describe purpose of link
title - gives name of relationship
href - link to
Example for a style sheet:
Example for a navigation link: