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.

<IMG SRC="url of image">

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.

ALIGNING IMAGES

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.

CHANGING THE IMAGE SIZE

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.

Image Borders

<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.

Links

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.

Text Links

<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>

Image Links

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.

BACK

NEXT