Finally, we come to the topic of Links. Links are what make an HTML page be more than just a text document. Links come in three basic varieties: links to other files, links to the same file and links to pictures.
To link to another file on another server, use
<A HREF="http://server/path/filename.html"> anchor text </A>. This is called absolute linking. The tag is called an anchor.

Example: <A HREF=""> The Walt Disney Home Page </A>

To link to another file on the same server, use <A HREF="path/filename.html"> anchor text </A>. That is called relative linking.

Example: <A HREF="../auction/Auction.html"> The Auction Block</A>

To link to a different place in the same file, you have to do two things. First you must leave a pointer to the place in the file you want to link to. The pointer looks like <A NAME="abcdefg">. The link will look like <A HREF="#abcdefg"> anchor text </A>.
Parts of other pages can be linked to in the same way:
<A HREF="http://server/path/file#abcdefg">

Example: <A HREF="#bottom"> Link to the bottom of the page </A>

Links to places in other documents can be done the same way.
<A HREF="Other.html#abcdefg"> anchor text </A> will do it.

Here's a cool trick from HTML 3.0: To have the link displayed in a new window, add TARGET="_blank" to your anchor tag like this:<A HREF="url" TARGET="_blank">. For an example of this type of tag, try the Scratch Pad from the main menu. When you create your page, it's displayed in a new window.
NOTE: This tag only works with Netscape 2.0. Any other browser will just ignore the TARGET tag.

To include a picture in your page, you use a slightly different link. <IMG SRC="picture">. picture can be a relative or absolute link, but absolute links are strongly discouraged because of the bandwidth they eat up. (It's much quicker to access a local drive than to go out over the net for a picture.)
Here's an example picture from the Nashville Gaming Connection:

<IMG SRC="Button-NAS.gif">

A thing you will often see is an image as a link. It's easy, just put the image link in as the anchor text like this:

<A HREF=""><IMG SRC="Button-NAS.gif"> </A>

Now, here's a hot tip. You can get rid of that colored border by using <IMG SRC="picture" BORDER=0>. It can turn links like this:

<A HREF=""><IMG SRC="WAR.gif"> </A>

Into links like this:

<A HREF=""><IMG SRC="WAR.gif" BORDER=0> </A>

Another important feature of images is alternates. In the case that your image doesn't load, or if the viewer is using a non-graphical browser, your text alternate will be displayed.
Alternates are done with <IMG ALT=text ... >. If text contains any whitespace, it must be enclosed in quotes.

Other interesting things can be done with IMG links.

By using <IMG BORDER=## ... >, with ## equal to a number, a border can be added to pictures whether they are anchors or not.
By using <IMG HEIGHT=## WIDTH=## ... >, the height and width of the image can be controlled. ## is the height or width you want to image to be. This is useful in formatting.
By using <IMG ALIGN=?????? ... >, a variety of things can be done. ?????? can be one of five things: TEXTTOP, MIDDLE, BOTTOM, LEFT or RIGHT. Default is BOTTOM.

Top Aligned
Middle Aligned
Bottom Aligned
Left Aligned
When an image is left aligned, more than one line of text can be placed beside it, and when there is too much text to fit in the space to the left of the image, it wraps around below the image. However, the catch is that the left align stays in effect until all the space to the left of the image has been filled. That means that the next paragraph or image or whatever follows the left-aligned image may end up formatted completely wrong if you expand the window of your browser too wide. Also, if you have a long image, you may never be able to fill all the space with text since HTML doesn't recognize multiple whitespace characters. The way around this problem is to use tables (view the source for my homepage.).
Right Aligned
Right-aligned images work the same way as left-aligned.

That's it! That's all the basic HTML you need to know to write an really impressive homepage. It may seem like a lot, but most of it is really rather intuitive, and you should pick it up pretty quickly once you start using it.
There is a lot more out there than just this, though. To find out about some of the more advanced HTML go to the next lesson, Advanced HTML. With every new browser, new code appears. For more information on advanced HTML, check out How do they do that with HTML? Or, for the whole shebang, try Netscape's complete definition of HTML 3.0 And always, if you see something cool, view the source (Go to the View menu and choose Source....) and find out how they did it!!!

The next lesson is Advanced.

Take the Links Pop Quiz

Return to the Menu