The old saying "a picture is worth a thousand words" is really true when you
make your own web site. Web page graphic images add so much to your web page,
without taking up too much space (if you do it right).
Sometimes web page graphics can cause problems. If your webpage takes forever
to load, people leave. This usually happens when a graphic is just too large.
Can you make the web page graphic smaller with the same effect? If you can, it
loads faster.
Plan your graphics and definitely get a good computer graphic program. The
default size of your web page graphic should fit in your page without
adjustments.
more about images...
|
|
simple picture
|
Web page should look like this.
|
make GIF image 64x37 pixels
|
|
|
The <img> tag puts a web page graphic image on your web page.
All it really needs is a filename with the SRC modifier. The graphic
file can be in .GIF or .JPG file format.
more about images...
|
set dimensions
<img src="painting.gif"
width=64 height=37
>
|
|
Web page should look like this.
|
make GIF image 64x37 pixels
|
|
|
|
Dimensions make your web page load faster. Each time a page loads,
your browser has to set aside space for each web page graphic. If it
isn't defined, it guesses. Then, if it's wrong, it refigures how much
screen space to allow for the web page graphic image.
Your web page graphic size should match your dimensions. This keeps
the browser from having to calculate different dimensions. This works
so much faster, besides, you can distort your picture if you use the
wrong dimensions.
more about images...
|
align picture right
<img src="painting.gif"
width=64 height=37
align=right
>
|
|
Web page should look like this.
|
make GIF image 64x37 pixels
|
|
|
|
The align modifier simply puts the picture where you want
it. Your choices are left, right or center.
more about images...
|
alternate text
<img src="painting.gif"
width=64 height=37 align=right
alt="Palette of a great artist"
>
|
|
Web page should look like this.
|
make GIF image 64x37 pixels
|
|
|
|
The alternate text actually does two things. First, if you hold your
mouse over the graphic, your alt text pops up over your
picture. Sure is cool HTML code.
The second and probably most important, is to make sure someone with
an older non-graphic browser also knows what is there. This modifier
makes your page ADA compliant for our blind web surfers (or some of
us iconically challenged).
Another side benefit; the Search Engines do not recognize your
web page graphic, but will recognize your alt text and index
it.
more about images...
|
Wrap text around your web page graphic
<img src="painting.gif"
width=64 height=37 align=right
alt="Palette of a great artist">
See, I can make my own web page with web page graphics
and text.<br>
This is a picture of the palette of a great artist. Of
course we can't tell you which great artist, because
she is still alive. Artists are seldom recognized during
their own lifetimes.
|
|
Web page should look like this.
See, I can make my own web page with web page graphics
and text.
This is a picture of the palette of a great artist. Of
course we can't tell you which great artist, because she
is still alive. Artists are seldom recognized during
their own lifetimes.
|
|
The text wraps around the graphic rather nicely, doesn't it?
|
Well, when you read something, you often get a picture in your mind
of the author. I wonder how many of you thought I would look like
this?
|
My Picture
<img src="pics/alien.gif"
width=75 height=125
alt="Portrait of the Author">
|
|
Web page should look like this.
|
|
What? How do we make a motion graphic? Good question! This is an
animated graphic. All of the motion is contained within a single
web page graphic file. This GIF file actually contains several
pictures (16 in this case) and flips through them at a programmed
rate.
|
Computer Graphic Program
Now, you can make your own graphic image or adjust
your web page graphic for most efficient web page loading.
You can even make your own free animated graphics.
Now, you don't have to spend hundreds of dollars for an
excellent computer graphic program. I proudly recommend the
Corel Paint Shop Pro
program from Jasc.
The software is quite powerful but reasonably priced. I used
this computer graphic program for all the web page graphics
on this web site. Make you own graphic images now!
|
|
|
NEXT
