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.texascook.com"> TexasCook.Com </A>
To link to another file on the same server, use <A
anchor text </A>. That is called relative linking.
Example: <A HREF="../index.html"> Our Band Site</A>
To link to a different place in the same file, you have to do two
First you must leave a pointer to the place in the file you want to link to.
The pointer looks like
anchor text </A>.
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 way.
whatever"> anchor text </A> will do
Here's a cool trick from HTML 3.0: To have the link displayed in a
add TARGET="_blank" to your anchor tag like this:
To include a picture in your page, you use a slightly different link.
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 TexasCook.Com
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
Into links like this:
Another important feature of images is alternates. In the case that
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
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: TOP, 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, there catch is that the left align stay 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 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 images work the same way as left-aligned.
That's it! That's all the basic HTML you need to know to write an
impressive homepage. It may seem like a lot, but you should pick it
up pretty quickly once you start using it.
Now continue on with the Advanced Portions.
Return to the Menu
Resume the Lesson (Back Up)
Page Design By