Basics: Part 5

Geocities
BASICS
Part 1
Part 2
Part 3
Part 4
Part 5

SO, YOU WANT A HOMEPAGE?

Part 5: THE IMAGE YOU WANT

So far, we have covered how to go about getting a chunk of Cyberspace for our homepage, how the File Manager and Basic Editor work, how to do a basic homepage, and how to link pages and sites together using a simple tag. This brings us to images (graphics)--how to call them into your page, and how to also use them as a link.

Images enhance a page. But too many images can cause a page to take forever to load--especially if most of the images are animated. Images can be photos, drawings, animated characters, etc. They usually are in the form of a "jpg" (usually a photo), or a "gif" (banners, logos, buttons, animated and non-animated figures, etc.).

Installing an image is easy, but it requires a specific form. Let's look at an example:

Just as HTML pages have addresses on the Net, so do images. I want to install an image of a dog that's called "dog.gif" and is located at the address http://www.suckyimages.net. Here's the full image command:

<IMG SRC = "http://www.suckyimages.net/dog.gif" alt="dog" width=100 height=50 border=0>

After the opening <, the first element is the IMG command to tell the HTML page what to put in. The next part, SRC="URL", tells the page the full address where the image is located. If you close the command at this point with a >, the image will appear when you load the page.

But wait, there's more you can do:

Every image has dimensions. If you put the dimensions in the IMG command, it tells the browser (WEBTV, Netscape, or Explorer) how big the image is and how much space to set aside for it. This helps the page to load faster because the text can be displayed while the image is still coming in. WEBTV can't show you the sizes of images, but if you have access to a computer, you can get the dimensions that way. Some image sites also will show them with the filename. If possible, try to include the width and height of your image in the command.

Also included in the tag, is the border. The border is kind of like the "frame" around the image. If you use a zero (0) as your border, there will be no border; the higher the number, the larger the border will be.

And finally, the alt. This acts like a title for the image. WebTV cannot see the alt of an image, but other browsers can. It tells the non-WebTV viewer what the image is before that image loads, and after. You can make up any title of your image for the alt.

Making an Image a Hotlink

To make an image function as a link, we need to refer back to Part 4 where we discussed "linking". Remember the tag <A HREF> </A>? All we have to do is to put the tag around the image:

<A HREF = "http://www.suckyimages.net"> <IMG SRC = "http://www.suckyimages.net/dog.gif" alt="dog" width=100 height=50 border=0></A>

Now, this image will be a "hotlink". Your visitor will be able to click on that image to go to the linked site. This especially helpful when your page starts to receive awards. Most awards request or make a requirement of linking the award back to them, as awards provide a good source of advertisement for their site. Also, some sites require that you use their logo with a link back to their site, in return for using something from that site. This tag is the way you'll do it.

Using an Image in the Background

To use an image as a background for your page, you place it in the BODY tag with the URL of its location. Here's how a JPG called "skybg.JPG" can be called into the background of your page:

<BODY BACKGROUND="http://www.suckyimages.net/skybg.JPG">

Background images will naturally "tile" -- that is, they will repeat across and down to fill the whole page background. Most backgrounds are designed for this, and the good news is that you can use quite a small image to fill the page. The image that we use to make the "notebook paper" on this page actually is only 37 pixels high, although it's the width of the page. Here's what it really looks like (cut narrower and with a border so you can see it):

Think Before You Link!

Whoa! You can pull an image into your page from anywhere on the Web, but you shouldn't. Before you put the URL of an image that's not in your directory, read this!

Every time you call an image into your page, the browser opens a stream to the server where it's located to request it. It's quick if the image is on the same server as your page because the browser is already talking to that server.

But if you pull your images in from other sites, a message has to be sent to those servers to request them. Wonder why your page loads so slooooowly? If you've got 10 images and you're calling them from 10 different sites, every one of them has to respond before the page will load completely. Chances are that at least one of them won't, and you'll wait for a couple of minutes before the browser gives up and just displays a broken link.

Worse, it also hurts the people who own the sites you pull from. At the very least, you'll cause them to run more slowly, too. You're actually taking their bandwidth that their site host is allowing them, but they're not getting the benefits of any page hits from it. Some site hosts charge their "tenants" when their bandwidth usage gets really high. Sadly, there are artists who have had to close their sites because people "pulled" rather than copying their images.

Yes, being a fellow WEBTVian, I know that we cannot help it. What to do? Here are some ideas:

Link Locally. If you're on GeoCities, for example, use images that are also on GeoCities. Most of the places where WebTV users build have images that you can use. Check out the Resources section for some possibilities.
Use a computer at work or school, at the library, or go to Kinko's (where you can also scan and upload you own photos)
Ask a PC-using friend to copy and upload all of your graphics, midis, sound files, etc.

If you don't have anyone, at least ask permission from the site before you actually do the pulling. You'd be surprised how many sites WILL give you permission, and they appreciate your thoughtfulness, too!

And that's all there is to it! As I said, it's a fairly easy command to use, just a bit involved.

In Part 6, we will discuss how to put sound on your page. Yes, midis and other sound files are fun to use and can greatly affect your page when used correctly.

See you then!

Soose