|
IMAGES
NOTE:
See 'Resources' section of
Webtv Tutorial
for image sources.
OKAY... for this tutorial section we will use a non-annimated webtv logo.
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:
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:
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:
- The 'img src' can be in CAPS (IMG SRC) however the actual URL is case sensitive!
- The only space in the command/tag is the one between 'img' & 'src'
- 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...
•••••
•••••
•••••
•••••
•••••
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
•••••
•••••
•••••
•••••
•••••
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.
•••••
•••••
•••••
•••••
•••••
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:
|
Here 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:
|
Here 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:
|
Here 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:
|
Here 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:
|
Here 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.
•••••
•••••
