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="Links.html"> The Links Tutorial </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 abcdefg
">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.
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:
To include a picture in your page, you use a slightly different
link.
<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:
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.
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.
<A HREF="Other.html#abcdefg
"> anchor
text </A> will do it.
NOTE: This tag only works with Netscape 2.0. Any other browser
will just ignore the TARGET tag.
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:
</A>
picture
" BORDER=0> </A>
</A>
Alternates are done with <IMG ALT=text ... >. If text contains
any whitespace, it must be enclosed in quotes.
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: TOP, 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, there catch is that the left align stay in effect
until all the space to the left of the image has bee filled. That
means that the next paragraph or image or whatever followed 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 not ever be able to fill 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.
The next lesson is Advanced.
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!!!