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.
Let’s look at an image on a web page. Click here. Remember to click the back arrow to return here, where you will see the same picture (below).
|
|
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 a URL (check the glossary above if you don’t remember what URL stands for—be ready for a pop test next week) ending in marlenea.jpg. If you right click on the same picture on the other page, you'll see the same information. Go ahead, click marlenea.jpg, and see where it takes you. Remember you'll need to click the back arrow return to this page. |
Welcome back, again. What
is that all about? A separate web page 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, you can scroll down looking for the picture, represented
by this tex:
<img border="0" src="marlenea.jpg" width="254" height="270">
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 my loving rave about Marlene Dietrich.
|
Let’s see what this
means. What is the difference between these two illustrations, of a rather
different woman,
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.
Maybe you’ll realize 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).
If you enter either of those URL's into your browser's ADDRESS bar, 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.
I copied the image from a web page by right clicking, then clicking on "Save as" and then naming it. I named this file (graphic) "mckinley," but 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 onto 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 Marlene
Dietrich 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.
