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="http://www.disney.com"> 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
Parts of other pages can be linked to in the same way:
Example: <A HREF="#bottom"> Link to the bottom of the page </A>
Links to places in other documents can be done the same
<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
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
Here's an example picture from the Nashville Gaming Connection:
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:
Now, here's a hot tip. You can get rid of that colored
border by using
Into links like this:
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
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.
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 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