HTML Basics

Lesson 4: Links

Find out how to code links to other Web pages within your Web site as well as links to other Web sites; seamless incorporation of links into Web content will be covered. Also, links to target sites on the same page, links to graphics, more.

Links to other Web pages

Links to other Web sites

Just as a Web page wouldn't seem like a Web page without graphics, it wouldn't seem like a Web page without "links" to other Web pages or sites either. And creatings links (actually, hyperlinks) to other Web pages using html is even easier than creating html code for graphics. For this, the <a> and the closing </a> tags were created.

If you've ever looked at source codes, no doubt you have seen something like this:

<a href="http://www.somewebpage.com">Some Web Page</a>

The "http://" designator means "hypertext transfer protocol" and must be used in a link when the linked page is not on your own Web site; the "www" part is the name of the page over the World Wide Web. The whole thing put together is the URL (uniform resource locator), the Web address.

For a link to work properly the following attributes must appear in the link, in order as they appear on this list:

• <a href=
  
• URL for the linked site in quotes. This means the "http://" part, such as http://www.somewebsite.com. Remember to put quotes around the URL.
  
• Close the link with >
  
• The name of the site, followed by </a>
  

Suppose you are linking to a Web page called "Bob's Simpson's Fan Page" and has a URL of http://www.BoblovestheSimpsons.com

Your link code would look like this:

<a href="http://www.BoblovestheSimpsons.com">Bob's Simpson's Fan Page</a>

and looks like this on your web site (remember this is for illustration purposes only; this link doesn't work):

Bob's Simpson's Fan Page

Links to pages within your Web site

Suppose your Web site is called "I Love Bluegrass Music" and has the URL "http://www.bluegrassmusic4ever.com/", and suppose you want to link to your "Flatts & Scruggs" page within your site. If you are linking to a page WITHIN your site, you don't need to type the entire URL between the " " after the "a href=" part; all you need is the filename of the Flatts & Scruggs page--if this page is at "http://www.bluegrassmusic4ever/flatts_an...", you simply type this as your link:

<a href="flatts_and_scruggs.html">Flatts & Scruggs</a>

So this is how you could incorporate a link into text so that it's seamless:

"I first discovered bluegrass music watching The Beverly Hillbillies; some of their best episodes had <a href="flatts_and_scruggs.html">Flatts & Scruggs</a> playing their music on them." (Or you can change this for variety to <a href="flatts_and_scruggs.html">Lester & Earl</a>, for instance.)

Incorporating links to Web pages, on and off site

One of the neatest ways to work links into your page is to incorporate the link into your text, both links to pages on your site and to off-site pages as well.

You can of course have both kinds of links, to pages on your site and pages off, but make sure you denote the offsite page URL with the "http://" designator. For instance:

"I first discovered bluegrass music watching The Beverly Hillbillies; some of their best episodes had <a href="flatts_and_scruggs.html">Flatts & Scruggs</a> playing their music on them. Because of this show, I later bought several <a href="http://www.bluegrassmusic.com/">more bluegrass albums</a> to add to my collection." (Note: I don't know if the "more bluegrass albums" link works or not--it was only for illustrative purposes!)

It will look like this on your page (remember this is for illustration purposes only; these links don't work):

"I first discovered bluegrass music watching The Beverly Hillbillies; some of their best episodes had Flatts & Scruggs playing their music on them. Because of this show, I later bought several more bluegrass albums to add to my collection."

Rules for creating links

Before I go on with linking inside pages, let me bring up some important points I may not have mentioned earlier:

• You must put a space between the "a" and the "href" in the "a href" tag, or else it won't work!
  

• You must not put any other spaces in your link other than that between the "a href"
  

• You must NOT FORGET to close your link with </a>, or else you'll see a blank space on your page instead of the name of the link
  

• You MUST put the URL in opening and closing quotes; leaving any of the quotes out will cause your link not to work
  

• As with any other tag you use, you can use small letters as I do, or CAPITAL letters as the text does, it makes absolutely no difference, and you can use both letters on the same page, it makes no difference (though I'm sure you figured that out already)
  

1  2  3  4