<
WebTV Tutorial
sponsored by map
WebTv Gif
IMAGES


IMAGES

NOTE:
See 'Resources' section of
Webtv Tutorial
for image sources.

OKAY... for this tutorial section we will use a non-annimated webtv logo.
WebTv Gif

It can be found at:
http://gifs123.tripod.com/wtvlogo.gif
This is an image that you are invited to link to - but don't just link to anybody's image - that steals people's copyrighted material (a legal no-no) and bandwidth (not a nice thing to do)!

Now,
Looking at the basic image command/tag,
<img src="http://gifs123.tripod.com/wtvlogo.gif" width=132 height=96 alt="WebTv Gif"> we see that there are three main parts of an image tag/command:
  1. The Image's Address/URL
  2. Image's Dimensions
    and
  3. The Alternate 'Description'

    Although all you have to have to make an image display is the Address/URL, all three of these items/attributes should always be included!

    and (though not used in the above example) you can also use the

  4. Align Attribute
Click On Each Attribute For More Information
(or scroll down through each item)
http://transload.starblvd.net/ts.shtml



•••••

The Image's Address/URL

The image's address/url is where the image (that people see when they visit your web page) is stored. It doesn't live on your web page itself - instead it lives at it's own 'home' (URL) and is brought to your webpage (to be displayed) whenever someone visits your page.

It may live in a section of your own URL where you have stored it, or it may live at someone else's site. The image we are using for this example:
WebTv Gif
http://gifs123.tripod.com/wtvlogo.gif
is an example of the second possibility.
REMEMBER:

DO NOT USE SOMEONE ELSE'S GRAPHICS OR LINK TO IT AT THEIR WEBSITE WITHOUT THEIR PERMISSION!!!

THE FIRST IS AN INFRINGEMENT OF COPYRIGHT, THE SECOND STEALS 'BANDWIDTH' - DON'T DO EITHER!


The WEBTV gif we are using here, is one that you are welcome to use and to steal... The site where it is stored was created for WebTVers with that purpose in mind.

Sooo... that said, we will now begin to construct our Image command/tag... the format is:

<img src="http://gifs123.tripod.com/wtvlogo.gif">

NOTE:
  1. The 'img src' can be in CAPS (IMG SRC) however the actual URL is case sensitive!
  2. The only space in the command/tag is the one between 'img' & 'src'
  3. The URL is placed inside of quotation marks.


Now, that much will make the image appear on your page, however you should include the dimensions and alt attributes, since they make you image work better on some browsers...

•••••

GO TO IMAGE TAG
ELEMENTS LISTING

Go To Index


•••••



•••••



•••••



•••••

Image's Dimensions

NOTE:
See the 'Resources' page of the 'Tutorial' for how to determine an image's dimensions. This will be in the 'Image Source' section of that page.
While your image will be displayed without the 'width' and 'height' attributes, it slows doen some browsers when they don't have this information to work with... plus you can change your image's size with these attributes!

First, the tag for the basic display:

<img src="http://gifs123.tripod.com/wtvlogo.gif" width=132 height=96>

Note: There are spaces between each command/tag element.

And You Get:

CHANGING SIZE:
You can alter the original size of the image:


W=33 H=24

W=66 H=48

W=99 H=72

There will be minor distortions where fractions must be changes to the closest whole number... but (unless it is your intent), watch out for major distortions like these:


W=50 H=26

W=80 H=43

W=43 H=60

And you may be able to enlarge the image slightly:


W=143 H=104

But don't go too far or you will loose the quaity of the image:


W=396 H=288

•••••

GO TO IMAGE TAG
ELEMENTS LISTING

Go To Index


•••••



•••••



•••••



•••••

The Alternate 'Description'

The "alt" functions when there is a problem with the display of your image. It tells people what the missing image is... not as satisfactory as seeing the actual picture, but it may aleviate some confusion & frustration.

In our example:
<img src="http://gifs123.tripod.com/wtvlogo.gif" width=132 height=96 alt="WebTv Gif">
The 'alt' is "WebTV Gif"

NOTE:
There are NO spaces between 'alt="' however there are spaces permitted inside the quotation marks that define the 'alt' statement.

•••••

GO TO IMAGE TAG
ELEMENTS LISTING

Go To Index


•••••



•••••



•••••



•••••

Align Attribute

This attribute of the Image tag/command is optional, and actually is one that I have seldom (if ever) used. This is largely due to the fact that I prefer to create the same effect using tables (See discussion of 'Tables' in a separate section of the 'Tutorial').

However, for the sake of being complete, let's look at five example of the 'Align' attribute:

The command/tag:
<img src="http://gifs123.tripod.com/wtvlogo.gif" align=top width=132 height=96 alt="WebTv Gif">Here is a sample of text and graphics where the align attribute has been assigned the 'top' value.

Creates:
WebTv GifHere is a sample of text and graphics where the align attribute has been assigned the 'top' value.

The command/tag:
<img src="http://gifs123.tripod.com/wtvlogo.gif" align=bottom width=132 height=96 alt="WebTv Gif">Here is a sample of text and graphics where the align attribute has been assigned the 'bottom' value.

Creates:
WebTv GifHere is a sample of text and graphics where the align attribute has been assigned the 'bottom' value.

The command/tag:
<img src="http://gifs123.tripod.com/wtvlogo.gif" align=left width=132 height=96 alt="WebTv Gif">Here is a sample of text and graphics where the align attribute has been assigned the 'left' value.

Creates:
WebTv GifHere is a sample of text and graphics where the align attribute has been assigned the 'left' value.

The command/tag:
<img src="http://gifs123.tripod.com/wtvlogo.gif" align=right width=132 height=96 alt="WebTv Gif">Here is a sample of text and graphics where the align attribute has been assigned the 'right' value.

Creates:
WebTv GifHere is a sample of text and graphics where the align attribute has been assigned the 'right' value.

The command/tag:
<img src="http://gifs123.tripod.com/wtvlogo.gif" align=center width=132 height=96 alt="WebTv Gif">Here is a sample of text and graphics where the align attribute has been assigned the 'center' value.

Creates:
WebTv GifHere is a sample of text and graphics where the align attribute has been assigned the 'center' value.

You will note that the 'bottom' and 'center' values create the same effect.

•••••

GO TO IMAGE TAG
ELEMENTS LISTING

Go To Index

•••••
Go To Index