Home

Basics

Using Flags

More Text Flags

Placing Images

Colors

Backgrounds

Linking Pages

Tables

Getting Online

HTML Basics, Tips and Tricks
by Fox Bautista

LINKING PAGES


Creating a Link to Another Page

It's a set flag format like any of the others you've seen so far. Once you learn the format, you can make as many links as you want to any other page you want. Now an example: The lil' bit of code below will create a link to GameFAQs.com, one of my favorite spots on the 'Net:

<A HREF="http://www.gamefaqs.com>GameFAQs.com</A>

This is how the code will show up in the browser. If you click on it, it'll send you shuffling off to GameFAQs.com.

GameFAQs.com

Here's what's going on:

  1. A stands for Anchor. It begins the link to another page. HREF stands for Hypertext REFerence. That's a good, short way of saying to the browser, "This is where the link is going to go."
  2. http://www.gamefaqs.com is the FULL ADDRESS of the link. 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 flag, a command inside of a command. (Remember that from the Flags lessons?)
  3. Where it reads "GameFAQs.com" 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, write something that denotes the link.
  4. </A> ends the entire link command.

What to Write for the Link

Anything you want, basically (so long as it's not offending anyone). You can type something like "Click here to go to..." or "Here's a cool place..." What's important is that you lay them out neatly, and that your page visitors have an easy time finding them.


E-Mail Links

This is what's known as a mailto: command. It follows the same coding scheme as the hypertext link above. What this format does is place some highlighted text on the screen that people can click to send you a piece of e-mail. Here's the pattern:

<A HREF="mailto:[email protected]">Click Here To Write Me</A>

Here's how it's going to come out. Go ahead, click on it if you want to.

Click Here To Write Me

Notice it's the same format as a link, except here, you write "mailto:" in place of the http:// and your e-mail address in place of the page address. Yes, you still need the </A> flag at the end. Note that there's NO SPACE between the colon and the e-mail address.

The same thing will work for you. Just place your e-mail address in place of mine, following the format above.


Images as Links

You can also use an <IMG SRC=" "> after the <A HREF=" "> flag, instead of regular text, to turn any image into a link. Let's turn my image.gif into a link to GameFAQs.com: (and CENTER it on the page, just for layout purposes)

<CENTER> <A HREF="http://www.gamefaqs.com"> <IMAGE SRC="image.gif"> </A> </CENTER>

This is how it's going to come out. You can click on the red smiley-box to go to GameFAQs.

Notice that border around the image? What if you don't want one? Here's what you do: Within the <IMAGE SRC=" "> flag, add BORDER="0". So now the flags read <CENTER> <A HREF="http://www.gamefaqs.com> <IMAGE SRC="image.gif" BORDER="0"> </A> </CENTER>. Here's what it'll look like now:

See? No more border.

Now you know how to link your pages together. Let's say you create a page with some cute pictures of you, another page with some funny stories, and another page with some pictures of your pets. From, say... the stories page, you can direct people to the pages with the pictures, like so:

<A HREF="myphotos.html">Click here to see some photos of me</A>
<A HREF="pets.html">Click here to see some photos of my pets</A>

There you go. We're all done here. If you want, you can go on to Tables.