SOYOUWANNA LEARN THE BASICS OF HTML?

4. ADD SOME HYPERLINKS

One of the most powerful features of HTML is the link, also called a hyperlink, which allows you to move with ease with from one document to another or to load movies, pictures, sounds, and programs. (Text and other content connected by hyperlinks is called "hypertext," and when we add tags to regular text, we're marking it up. "Hypertext Markup Language." Get it? No? Then it's more goat pudding for you until you figure it out.) A link provides the browser with the location of a file, as well as the method your computer needs to use to retrieve it. The link can be accessed by means of a symbol, either a section of text or a picture that a visitor can see and select on a Web page.

You can use the name of an HTML document, an image file, a sound file or a movie file -- such as a QuickTime or MPEG file -- as your linking destination. The visitor's browser will transfer the file to his/her computer and, if necessary, start up the helper application appropriate for using the file. The code to create a link has this format:

<A HREF =" . . .">[Text or image that will serve as the link on the page]</A>.

"HREF" stands for hypertext reference. (We'll get to what the "A" stands for in a minute.) It basically tells your browser, "Check this out." For example, say you add to your document the line:

<A HREF ="https://soyouwanna.net">Click here.</A>.

The Web address or URL "https://soyouwanna.net" is the target or destination of the link. (URL stands for "uniform resource locator," and refers to a document's location or address on the Web). The target is what we're telling the browser to go check out. The text between the tags "<A HREF="https://soyouwanna.net"> and "</A>" is the link text. In this case the link text is the phrase, "Click here." It's what a visitor will click on to access another document through the hyperlink you've set up. The visitor will only see the link text.

For example, when your document appears in the visitor's browser, the link text, "Click here." will appear on the page (underlined and in light blue). When the visitor does so, the browser will transfer him/her to the target location described by the hypertext reference, in this case our favorite Web site for the latest in entertaining how-to articles.

You can also link to an image. When a visitor clicks on your link, the browser will go looking for the target image. When it finds it, the image will appear in the browser window by itself. For example, assume that we still have our image file called "image.gif" stored in our current directory. Say you want to link to this image from your Web page, so that it will be displayed in the browser window by itself rather than on your page. You will type the following into your HTML document:

<A HREF="image.gif">Click here to check out my image.</A>.

When your page is viewed through a browser, the line will appear like this:

Click here to check out my image.

When the visitor clicks on the link text, the browser will transfer him/her from your Web page to the image file that is stored in your directory. Note: if the image is stored in a different directory from your HTML document, you will have to tell the browser the location of the other directory, just as in the last (IMG SRC=" . . . ") example:

<A HREF="graphics/image.gif"> . . .

You'll notice that in our link to "https://soyouwanna.net" we've put an entire URL inside the "<A HREF . . .>" tag. This is called an absolute link. The browser will go out looking for this link target on the Internet.

On the other hand, if we wanted to link from our first document to a second one in the same directory, we would not have to send the browser out looking for another Web server, but instead we could just send it directly to the neighboring document. This is called a relative link, because it sends the browser looking for the document only in relation to the document it's linking from:

<A HREF="document-two.html">Check out my second document.</A>

You won't need to understand the difference between absolute and relative links right now, but it will become important when you're uploading multiple pages linked together. (You may have noticed that the links we've made to images above are also relative links. You're such a smarty-pants.)

Links don't have to be textual. You can use an image for a link, too, by placing an image tag, instead of text, in between the matched tags for hyperlinking:

<A HREF = "https://soyouwanna.net"> <IMG SRC= "image.gif"> </A>

The image will appear normal in the browser window, but when the user clicks on it, it will take him or her to the link target.

Links to other parts of the current page: anchors

You can also add links to different parts of the current document, such as separate sections, a table of contents, or the top of the page. To do this, you need to set up special destination points within the document, which are called anchors. This is done using the <A NAME> and </A> tags. (The "A" stands for "anchor.") What we are doing with these tags is creating and naming an anchor. Once you've set up some anchors, you'll be able to add links to them by using the "#" character. As an example, we'll set up an anchor point called "sample" on our Web page, using the following line of code:

This is the <A NAME = "sample">practice anchor.</A>

The anchor itself will not appear in the browser:

This is the practice anchor.

However, the browser will recognize that an anchor called "sample" has been located at the phrase practice anchor. This anchor will serve as our link target. We can now set up a link that will take us to the anchor that we have named "sample." In this case, this link will take us to the words practice anchor, since this is where we've established the anchor, by locating it between the <A NAME> and </A> symbols. Here's the line that will link to our anchor:

Now a <A HREF = "#sample">link</A> to that anchor.

This line will appear in the browser as:

Now a link to that anchor.

You may notice that a link to an anchor, when viewed through a browser, looks just like a regular link. But within the code of our HTML document we use the "#" symbol as a sort of "go-to" instruction. When a user clicks on our link, in this case the word link, the browser will transfer them to the link target, the point on the page where we established our "sample" anchor.

It's also possible to create an anchor on one page, and then link to it from another one. To link to an anchor in another document, you simply add the "go-to" instruction and anchor name to the end of the filename. For example, if we wanted to link from our current page to an anchor called "sample" on a second Web page, called "document-two.html," it would look something like this:

This <A HREF="document-two.html#sample">link</A> goes to another page.

In the browser, the line will appear like this:

This link goes to another page.

When a visitor clicks on the link, it will take him or her from the current document to the link target, the spot on "document-two.html," and to precisely the spot where the anchor called "sample" has been established.

Contact Information

You can create a hyperlink to your email address, so people who are accessing your home page can contact you directly to tell you how much they hate it (and/or you). The tag for an email link looks like this:

<A HREF="mailto:[email protected]">Your Name Here</A>

In the browser, it will look like a regular link: Your Name Here. When a user clicks on this link, his/her browser will activate his/her default email application, and open a new, blank message. The message will already be addressed to you, and the user will only have to fill in his/her message and hit the "send" icon or command.