| HTML Code MiniChapter 11: More About
Graphics
What's a good graphics program?
Operating System:
Linux? Try The Gimp!
Macintosh? I am told GraphicConverter is pretty good. The Gimp will
also run on Mac OS X.
MS-Windows? I must say Corel's (formerly Jasc Software's) Paint Shop
Pro, this is the program I started out with when I first built my
site. You can download an evaluation copy from jasc.com or purchase
a boxed copy of Paint Shop Pro from Amazon.com (below). Adobe
Photoshop Elements is also an excellent choice.
Aligning Images with Text...
You may have noticed by now that if you load an image without any
alignment, it will take up almost all of the room and only allow you
to have one line of text next to it, if you are confused, here's an
example:
<img src="html_small.jpg">Here is an image<br>
Isn't it cool?
Here is an image
Isn't it cool?
If you want to be able to have the text start at the top next to the
image, you must use the ALIGN attribute... example:
<img src="html_small.jpg" align="left">Here is an image<br>
Isn't it cool?
Here is an image
Isn't it cool?
Using <BR CLEAR=ALL>...
When you use the ALIGN attribute with images you may notice a
problem when you use the <HR> tag, because in some cases you may
want the horizontal rule to fall below the image.. not next to it..
example:
<img src="html2.gif" align="left">this is a big image.<hr>
this is a big image.
If you want the horizontal rule to fall below the image, you can add
the <br clear="all"> tag between the image and the horizontal rule.
Example:
<img src="html2.gif" align="left">this is a big image.
<br clear="all"><hr>
this is a big image.
This is also useful in other instances, such as when you want the
text to fall below the image.
Transparent Gifs...
gif files support a feature called transparency, in which one color
out of the 256 colors is set to be transparent. The HTML: Advanced
and Enhanced graphic pictured above is an example of a transparent
gif, because the background of the file is invisible, letting the
web page's background show through. In many graphics programs you
will find an option to save the background color as transparent,
which allows you to make your own transparent gifs.
Interlaced vs. Non-Interlaced...
When a graphic is downloaded into a web page, it is loaded one of
two ways, interlaced (every other line the first time, then the
other lines the second time) or non-interlaced (first line, then
second line, then third line) Here is an Example of each type:
Interlaced Gif - flowers_int.gif
Non-Interlaced Gif - flowers_non.gif
Non-Interlaced Jpg - flowers_nonjpg.jpg
The two gifs take about the same time to load, so it is up to you
which one you wish to use on your web pages. This feature is not
determined by a tag, rather by the format you saved the file in.
(You'll notice the jpg is clearer... that's because jpg was made for
photographs.)
"I'm Lost" - Why do I write a small paragraph about interlaced vs.
non-interlaced images? When this tutorial was first written,
28.8kbps modems were the newest and greatest thing. In speeds of
28.8kbps and less (most cell phone/PDA browsers circa 2000/2001
still run at 9.6kbps to 14.4kbps) an interlaced image has the
appearance of loading faster, and makes your site look a bit more
professional. In current day when most modem speeds are 56kbps and
it is common to have cable or DSL in the home, this is not nearly as
much of a concern.
Animated Gifs...
The gif version 89a supports an advanced technology which allows
animation. Inside a single .gif file is stored many picture frames
and an index telling how long each frame should be shown, if they
should repeat after they are done, etc. If you wish to create your
own animated gifs, try using UnFREEz [freeware] or the Gif
Construction Set from Alchemy Mindworks [shareware] if you are using
Windows. Animated .gifs are treated as a standard img file, so it is
loaded with the standard <IMG> tag.
The Button pictured to the right is also an animated .gif.
Reference to the standard IMG tag...
<img src="image.ext" width="x" height="x" border="x" alt="x">
Name Of File--^ pixels--^ pixels-^ border-^ text-^
wide deep size description
Try it Yourself
In the Box below, type the following HTML code, then click "Check it
Out!" The HTML document you made will be displayed in your browser.
You may wish to change the words within the tags just to try it out.
Try typing this:
<html>
<head><title>Little Joe's Graphics</title></head>
<body>
<img src="http://www.davesite.com/webstation/html/html2.gif"
align="left"><br clear="all"><hr>
<img src="http://www.davesite.com/webstation/html/learnnow.gif"
border="0" align="left">
This is a cool animation:)
This page Copyright © Little Joe's Pages & davesite.com.
</body>
</html>
|