ROVIN'
AND RAVIN' WITH MIKE
Copyright © 2001
by Michael Segers, All rights
reserved
Brought to you by Peanut.org
Pictures on a Web Page
The other day, a friend was complaining about a web site that she wanted to
visit but that took so long to be viewed. Maybe you’ve had something similar
happen: after minutes, pictures are still slowly oozing onto your monitor
screen. So, the next time, you log onto the site, you leave the computer to, oh,
go churn butter (well, maybe, milk the cow and then churn butter… and while
you are at it, bake some bread to enjoy the butter on). But, to your surprise—surprise!—the
page pops right up, and the cow is left lowing mournfully in the barn. There are
lessons to be learned about graphics on web pages if all you do is log on to web
sites and even more if you have started designing your own web site.
First, illustrations on Internet sites are most likely in one of two
formats—either "gif" (graphics interchange format) or "jpg"
(or "jpeg," for Joint Photographic Experts Group). Logos and animated
graphics are usually saved as "gifs," while photos are most likely
"jpgs." By the way, if you would like to know more about these and
other Internet buzz words, do visit a very thorough online Glossary,
and at the next cocktail party, you can buzz with the best of them.
If
you are a consumer of (visitor to) websites, you don’t really need to know
when to use one or the other. If you are interested in creating your own web
pages, I encourage you to check out a very thorough article
on the differences between the two formats. This, by the way, is part of Big Nose Bird,
a site which is as full of warm humor and folksy charm as it is of all kinds of
useful information in very readable language about creating web pages.
So, let’s look at an image on a webpage, the photo of the Worth County
Courthouse on the home page of our freenet. Go ahead, click on the link, and take a look; then
click on the back arrow to come back here.
Welcome back. What you saw was this, wasn’t it?
Let’s see what we can
learn about this image. Using your mouse, move the cursor over the photo here,
and click on the right button. Then, move down the menu and click on
"Picture Properties," where, among other information, you’ll see
this URL (check the glossary above if you don’t remember what URL stands
for—be ready for a pop test next week):
http://www.peanut.org/images/crthus1.jpg
Oh, go ahead, click on that
link.
Welcome back, again. What
is that all about? A separate webpage for the photo? Well, yes… and no…. A
graphic (illustration) is not in the page so much as on it. If you
click on "View" above and then on "source" to see the source
code behind this page, and then scroll down looking for the line of text above
the photo above, you’ll see this:
<IMG SRC="http://www.peanut.org/images/crthus1jpg"
WIDTH=155 HEIGHT=230>
And that is all you’ll
find out about the photo. In formatting this page, I did not actually put the
photo into the page, but, just as if I had a photo album, I put that photo
(named in that "image source" line) onto the page. But, in fact, it is
available for other album pages—such as the homepage of Peanut.org.
Let’s see what this
means. What is the difference between these two illustrations?
A note of explanation. The lady is
Ida
Saxton McKinley, who, a century ago, was
widowed when her husband, President William McKinley, was assassinated. The link
takes you to her page in the official White House chronicles of the First Ladies of the United States. And if
you read the article (above) on the differences between "gifs" and
"jpgs," you’ll recognize that this illustration is a rectangular
"gif" with a transparent background (only possible with a
"gif").
What else can we find out? Remember what you can do with your mouse? Right-click
on each image, scroll down the menu, and click on "Properties."
You’ll notice these two images have two different names (file names, actually).
One is:
http://www.peanut.org/users/mike/text/mckinley.gif
And the other is:
http://www.whitehouse.gov/history/firstladies/images/im25.gif
If you click on either of
those URL's, you'll see the picture by itself. In other words, the first
image is actually here in our little old cyber-peanut patch, while the second
one is still in the White House. You can copy an image on a web page (as I
copied this one) by right clicking, then clicking on "Save as" and
then naming it. I named this file (graphic) "mckinley." I could have
named it "ida" or even "myhotdate" (no disrespect intended).
I
saved the file in my computer. Then, I created this page and stuck the graphic
of Mrs. McKinley on it. But, to have that picture show on this page, I had to
send this page itself ("mckinley.htm") and the picture file ("mckinley.gif")
to Peanut.org separately. So--pardon the extremely technical vocabulary--when
you decided to visit or view this page, the little Internet imps in your
computer ran to the peanut patch, grabbed this page as well as the photo, ran
back down the wire to your computer, propped the page in place, and then stuck
the photo on. Meanwhile, some other Internet imps ran all the way to the White
House, borrowed the photo, and brought it back.
We’ve covered a good bit of material here, and we’ve just gotten the photos
into your computer the first time. We still haven’t figured out why it takes
so long, the first time you visit a page or why the page pops up so much faster
the second time, so let’s stretch this out to another week.
Here’s a little puzzle
for you to think about until then. We’ve talked about the photo of the Court
House and the two pictures of Mrs. McKinley. But, there is another picture on
this page. See if you can find it. To learn more about "digital
imagery" (even why it is called that), check "Giving
Your Computer Eyes," and
if you are interested in creating your own web pages, you might want to brave
the Rovin' and Ravin' trilogy about such activities, which begins with "Who
Wants to Be a Web-master?" Keep your feet dry, and your own
personal Internet imps scurrying around to fill your computer with
"gifs" and "jpgs" to help you keep your heart full of noble
thoughts.
Look ahead to next week's rave,
"More Pictures on a Web Page."
Find more articles about creating your own website.
Rove to the Rovin' and Ravin' opening page.
