Text formatting is fun--but images can sometimes say more than words, and in a lot less
time. In the case of our example, for instance, maybe you want to put up a really hairy picture
so that people know why you were so grossed out. Here's
a pretty yucky one:
Now, how will you get it up on the web?
The first thing you will want to consider is how to format your image on a computer. Is
it already on disk? Or is it in a photograph, or on paper?
If it's still on paper, you're going to have to get it scanned, and have it saved on a
disk in one of two different formats: GIF or JPEG. Probably the most popular tool to use
is Adobe Photoshop (although there are plenty of others), and there's
lots of info out on the web to help you through the formatting process if you are interested.
When saving your image to disk, however, please remember to take stock of the following
things:
1. The size of your image in memory. Images that are up on the web are seldom
more than ~50K; if they are any larger, they will take a while to download. That means
that the folks who read your shoutout will sit and wait and wait and wait in front of
their computers for your image to pop on their screen, which can lead to impatience and
some generally bad vibes. So please try to keep your images kind of small.
2. The size of your image. If you post an image to gURL,
try not to make your image any wider than about 3 inches by 3 inches, more or less.
That's equal to about 200 pixels by 200 pixels. (What's a pixel, you ask? Find out more).
Let's say you have your image, it's in the GIF or JPEG format, and it's pretty small.
What's the tag to get it up on your page? Try this:
The IMG SRC tag tells the browser the name of the image that you want to put up
on the web. If, then, you have saved your photo in the gif format and its name is
"feet.gif," your tag will read exactly as it reads in the above example.
You will also want to make sure that your image in is the same folder that your HTML
document is. Otherwise the browser will not be able to find your image and you will get
one of those wacky little broken image pictures:
instead of the formatted picture of hairy feet.
HEIGHT and WIDTH tell the browser how tall and wide your image is (in
pixels). In the case above, "feet.gif" is 208 pixels wide and 132 pixels tall (so
it's about 3 inches by 1.5 inches, more or less). You do not absolutely have to include
the HEIGHT and WIDTH when you place an image in your HTML, but it helps and saves a
little time when your image loads.
The ALT tag is where you can write in the text that you want to have displayed
to the person looking at your image while it is still loading. In this case, the words
"hairy feet!" will pop up to the user while the image is loading onto the page; these
words will then be replaced by the image. This, like HEIGHT and WIDTH, is not a required
thing to include in your image tag, but it's a nice and user-friendly feature to make use
of.
The BORDER tag allows you to set the width of the border (in pixels) that you
want around your image. If you set your border to 0, there will be no border around your
image. If you set your border to 5, however, you will get a result that looks
something like this:
How does the HTML for the image above read? Like this:
You should also note that you can center images, or align them left and right, in the
same way that you can text. More excitingly, though, you can use them as links to other
pages so that when people click on them with the mouse, they go somewhere else.
Making your images link will be covered in the next section.
