This page looks at:Image tags and links |
Before I get into the html tags there are some
things you should know about using images on your
webpage as well as your e-mail signature. Images
use up a lot of memory space. They also take
time
to load. Images can be either GIF or JPG format
for
use with Webtv. Some GIF images are animated
(moving images). Just like with movie film, each
frame of an animated GIF is a seperate image,
therefor if you use an animated GIF containing 12
frames it will take up 12 times the memory of 1
frame and will take 12 times longer to load.
Take
this into account when planning you page. If you
load up the page with too many images your
visitors
may have to wait too long for it to load and will
go
away before it does. Also, if they have been
doing
a lot of surfing there may not be enough room
left
in their cache for your page and it will
seemingly
take forever to load. Use images conservativly.
Do not link to images on other sites. This is
known
as BANDWIDTH THEFT and web host servers do not
like
this practice as it costs them a lot of money.
One
by one they are preventing this by blocking
"remote
loading" from their server so do it the right way
the first time to keep your images working and
you
won't have to go back and rewrite your tags
later.
The right way is to transload your images to your
own site and link them to your page from your own
directory. Transloading tutorials are available
on
this help site so there is no excuse for stealing
bandwidth from other servers. This also makes a
difference in the way you write the image URL in
your image tag and in this tutorial I will assume
that your images are in your own directory.
This tag stands alone and requires no closing
tag.
Images cannot be put directly on the page but are
linked to from the page. Elements that must be
used
in the image tag are:
<IMG and src="URL of image">
Optional elements that may be used in the image tag are:
width=#, height=#, align="left". align="right"
align="center" is also a valid html tag but doesn't seem to work with Webtv. If you write your image tag within an open <center> then the image will be centered, otherwise you'll have to use <center> before the image tag and </center> after it if you want it centered.
Here are some examples of image tags:
<IMG SRC="images/webtv.gif">
In the URL element of the tag, "images" is the name of the directory where the image is stored and "webtv.gif" is the file name. Note that the URL is always placed in quote marks.
Now here is a tip you may find helpful. If you
have
text that you want to show next to your image and
wrap around the bottom of it, using the
align="left" attribute will create this
effect. Without it, your text will begin under
the
image on the next line.
The same tip applies to using
align="right".
If you have text that you want to show next to
your
image and wrap around the bottom of it, using the
align="right" attribute will also create
this
effect. Without it, your text will begin under
the
image on the next line.
By using the width attribute only, the height
will
automatically be adjusted by your browser to the
proper size. Likewise, using the height
attribute
only will cause the browser to adjust the width
accordingly.
You can control the height and width of the image
by
using both the height= and the
width=
attributes.
<IMG SRC="images/webtv.gif" border=10>
Any or all of the above elements may be combined within the IMAGE tag. Be sure to leave a space between each element.
There are basicly two kinds of links you will be
using on your webpage. They are text
links
and image links and are both known as
anchor links. The purpose of an anchor link
is
to send the browers to another page URL when you
click on it. Within the tag is the URL address
of
the page the link points to. The link has three
parts to it. The opening tag, visable
link,and the closing tag.
Anything placed between the opening
tag and the closing tag
becomes the visable link and it can
be
either some text or an image.
<A HREF="testlink.html"> Click here to Continue </A>
FOR GOD'S SAKE DON'T FORGET TO CLOSE THE TAG WITH </A> AFTER THE TEXT OR IMAGE IN THE LINK.
Note that since the URL in my link codes above (testlink.html) shows only a file name, then that page must be in the same directory as the page you are viewing. If you want your link to point to a different directory then that must be named in the URL as well:
<A HREF="tools/logins.html"> Click here for Logins </A>
To link to another site you will need the complete URL in the tag:
<A
HREF="http://techniguy.tripod.com/enter.html">
Click
here for Techniguy's </A>
This is what the code looks like for the NEXT button below:
<A HREF="5htmlhelp.html">
<img
src="images/next.gif"> </A>
Click on "NEXT" to continue.
|
|
|