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:
<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:
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.
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>
Now, here's a hot tip. You can get rid of that colored
border by using
</A>
Into links like this:
</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.