Now an example: What is below would create a link to the amazon.com home page:
<A HREF="http://www.amazon.com">Click Here For Amazon</A></B>
Here's What's Happening
- A stands for Anchor. It begins the link to another page.
- HREF stands for Hypertext REFerence. That's a nice, short way of saying to the browser, "This is where the link is going to go."
- http://www.amazon.com is the FULL ADDRESS of the link. Notice that you must include http:// in the address (more on that later). Also notice that the address has an equal sign in front of it and is enclosed in quotes. Why? Because it's an attribute of the Anchor tag.
- Where it reads "Click Here For Amazon" is where you write the text you want to appear on the page. What is in that space will appear on the page for the viewer to click. So be sure to write something that identifies the link.
- /A ends the entire link command.
Here is what the above code would produce on your page:
Now, without clicking, simply place your pointer on the blue words above. You'll see the address of the link you created come up along the bottom of the browser window, down where it usually reads "Document Done".
Absolute URLs and Relative URLs
There are two types of URLs that you can use with the A tag. The example above shows an absolute URL. This means that you include the complete URL, including http://. This type of URL is the only kind of URL you can use if you want to access Web pages outside your site. For example, let’s say that on your Web page, you would like a link to the HTML Goodies Web site. The HTML code might look like this:
<A HREF="http://www.htmlgoodies.com">Click here for the HTML Goodies Web Site</A>
There is another kind of URL that you can use with the A tag, the relative URL. The relative URL leads to another page relative to the location of the current page. In other words, you would use this to link to other pages on your own Web site.
Here is a good example. Let’s say I wanted to create a link to the Week 6 Lesson on this Web site. Well, I know I could use an absolute URL, like this:
<A HREF="http://sites.google.com/site/msporterwebdesign/>Click Here for Week 7</A>
But since this page is on my Web site, I could use a relative URL, like this:
<A HREF="lesson7.html">Click Here for Week 7</A>
It’s a lot shorter, isn’t it? The browser will simply look for another Web page in the current directory named lesson6.html. Use relative URLs when linking to other pages on your site. Not only will it save time, but using relative URLs helps you to test your links before you post them to the Internet. In short, use relative links whenever you can.
E-Mail Links
You can also use hyperlinks to create a link to write a letter to someone’s e-mail address. This is what's known as a mailto: command. It follows the same coding scheme as the hypertext link above
Here's the code:
Notice it's the same format as a link except in a link you write "mailto:" in place of the http:// and your e-mail address in place of the page address. You still need the /A tag at the end. Please notice there is NO SPACE between the colon and the e-mail address.
Here's what you get using the "mailto:" command above:
Go ahead, click on it if you’d like to. You'll get an e-mail dialogue box addressed to me. Then you can write if you want to.
Link Text Color
During Week 4, when you learned about adding color to your Web pages, you learned how to use the BODY tag to change the color of the background and text on your pages. For example, if you wanted to create a black background with yellow text, you might use a BODY tag that looks like this:
<BODY BGCOLOR= “#000000" TEXT=“#00FFFF">
Even though this code will change the color of the text on the page, the color of your links won’t change. As you may already know, the default color for unvisited links is blue, and the default color for visited links is a shade of purple. If you are happy with that, great, but you may want to change the color of your links. Guess what…you can! Here are a couple of important attributes that you can use with the BODY tag:
- LINK= “#------“: This changes the color of your unvisited links to the color of your choice.
- VLINK= “#------“ : This changes the color of your visited links to the color of your choice.
For example, suppose you wanted a page with red text for unvisited links and green text for visited links. You might use a tag like this:
A Sample Web Page
Your first assignment this week will be to copy the code below to create a Web page. This page contains the new tags and attributes that you learned this week. Before you begin this assignment, take a look at the code below and see if you can figure out what the page will look like:
<HTML>
<HEAD>
<TITLE>Links</TITLE>
</HEAD>
<BODY LINK="#FF0000" VLINK="#FF99CC">
<CENTER><H2>Links</H2></CENTER>
<H3>Examples of Absolute URLs for Links</H3>
<UL>
<LI><A HREF="http://www.amazon.com">Amazon</A>
<LI><A HREF="http://www.microsoft.com">Microsoft</A>
<LI><A HREF="http://www.htmlgoodies.com">HTML Goodies</A>
</UL>
<H3>Examples of Relative URLs for Links</H3>
<UL>
<LI><A HREF="page2a.html">My First Web Page</A>
<LI><A HREF="page5a.html">A Web Page with Lists</A>
<LI><A HREF="page6a.html">A Web Page with Images</A>
</UL>
<H3>An Example of an E-mail Link</H3>
<P><A HREF="mailto:adelmonte@natomas.k12.ca.us">Click Here to Write to Mr. Del Monte</A>
</BODY>
</HTML>
You have now completed the Week 6 Lesson. Please re-read this information until you feel that you really understand it. If you feel like you already understand the information on this page, you are ready to complete your Week 6 Assignments.
