Graphics Help

Inserting Images

Before I talk about inserting graphics, a word about copyrights. The images you see on the Web were created by someone, and the copyright resides with them. If you copy and save an image to your directory, you are violating International Copyright Laws and will be subject to prosecution. Sounds harsh, doesn't it, but it's true. A web page is a creative document, and so are the images contained therein. It does NOT have to be registered with the US Copyright Offices, or anywhere else, for the copyright protection to be valid. No Copyright notice is even necessary. So where do you get images for your web page? Well, short of creating them yourself, there are many many places on the web that offer graphics for use in personal home pages, either with a link back, or at least an acknowledgement. On the Links Page I have listed a few of the most popular/large sites.

What kind of images can I use? Well, theoretically, you can use any file type on your page, but the reality is that unless it's a .gif or .jpg file, most browsers will not view them without adding Special "Helper Applications." I don't bother to add them, so most others probably won't either. And since our purpose is to make sure everyone can see our work, be sure all images you use are either .gif or .jpg files.

The Tag
The basic tag for adding Images is the tag. Again, it's really logical, as this means IMAGE SOURCE. If you remember, HTML really isn't very intimidating after all. To this tag we are now going to add our picture name. Everywhere I use mypic.jpg, be sure to replace it with your actual filename and extension (.gif or .jpg).
"mypic.jpg">
Remember that spelling is VERY important here, as is capitalization or lack of it (Case Sensitivity). If the name doesn't match exactly, you will get the "broken box" that I hear so many questions about.
Although this will display a picture by itself, we need to add some more ATTRIBUTES to it, for faster downloading, and for graphic-impaired browsers (Speech browsers, Lynx, and those who choose to surf with graphics turned off).
ALT="A picture of my family">
What you've done is added an ALTernate description to the picture, which those folks using the above-mentioned browser will see. This will also display in Explorer before the picture loads. Make this as descriptive as possible, because even the blind would like to know what kind of picture is being displayed. Remember, their browsers read it out loud to them.

Now we're going to add some ATTRIBUTES that will allow for faster-seeming downloading of your page. What happens is the browser is capable of figuring out the width and height of your image, but will not display any text until it does get it loaded in. So if you add those attributes, the browser will have those dimensions, and can display the text around the image, without waiting. It gives people something to read while waiting. If I encounter a page where nothing shows up, and there are large images, I just leave rather than wait. And you don't want your visitors leaving before they see your work.
One other thing, make your file sizes as small as possible. The length of time it takes for a picture that is 300 kilobytes in size as compared to a 30 kilobyte is way too long. And I've seen file sizes larger than that. But I'm history if that's the case. An important point to remember, also, is that just changing the width and height numbers to make it smaller does NOT change the file size. It still takes just as long to load.

Let's assume our picture is 100 pixels wide and 150 pixels high. We now add the following to our TAG:
WIDTH="100" HEIGHT="150">
One other ATTRIBUTE that you can add, especially if you are using the image as a link, is the BORDER ATTRIBUTE. This will change the size of, or eliminate entirely, the Border that shows up when an image is used as a clickable link. So now we add the following:
BORDER="0">
Of course, it could also read:
BORDER="5">

One last word before moving on to adding backgrounds, make sure you act as a good "Netizen" and don't link to images on another site. This creates load problems for the other server, not to mention that those images may suddenly disappear. Please, please, please don't be a Bandwidth Bandit.

Backgrounds

To add Background images to our page, first we have to have one, and upload it to our directory. I am offering some of the ones I've created for your own use, and there are links to other "Free Graphic Sites" on the Web at the bottom of this page. Now we need to add the image to the BODY Tag.

Using our previous document, we'll add this to it now;




BACKGROUND="myback.gif" BGCOLOR="#0080FF" TEXT="#0000A0" LINK="#800040" VLINK="#FF00FF" ALINK="#FFFF00">
This is a ReallyAwesome Page.


Very simple, right? HTML is so logical. So why do I answer so many questions about Body Backgrounds not showing up? Mainly because there is more than one BODY Tag. Some people will add it separately, not knowing, or will add it as an IMG SRC, often before the BODY tag. Remember, that NOTHING goes outside of the BODY Tags.

Bordered Backgrounds
One of the more popular types of background you see on the Web lately is the Bordered Background, which has a separate image running down the side, usually if not always the left side of the screen. Also, one of the hardest things to figure out is how to keep the text from running into the border, making it impossible to read. Or maybe it will look okay in one browser, but not in the other. It's really very simple, you just need to add a table. Advanced HTML, right? Yes, but this is the simplest form, and is very easy to do. Going back to our "page," you will add this:

This is a ReallyAwesome Page.

Really a simple table, but you will need to make sure that you put it directly AFTER the BODY Tag, and CLOSE IT just before you close the BODY. And now you want to put EVERYTHING in between the TABLE Tags. No exceptions.

One other thing you will have to watch is the size of the rest of your images, particularly "divider" bars. You will want to keep them UNDER 500 pixels in width, or else the table will be pushed over to the left on those people (the majority) who are viewing with a 14 inch monitor, at the 640x480 resolution.

Aligning Images

Now we've got our images in place, how do we put them on the side of the page we want them to go? We're going to add the ALIGN ATTRIBUTE. This can be done in either of two ways, depending on whether or not we'll be adding text to go along with the picture. The simplest, of course, is just to add the ATTRIBUTE to the IMG SRC Tag. For example:

To center an image, all you need to do is add

tags between the IMG SRC Tag, like this:
It will view like this:

The default value is LEFT or in other words, if you do nothing your image will align to the left of the page, Like this:

You can enclose the Image inside the

View the Guestbook

View the Guestbook

View the Guestbook

You can also use a
tag to move the text under, or put the text first and add a
after the text.

One more thing, if you have multiple images you want displayed on the same line, you can either enclose them in a plain set of

Your Images Here

You can also add the VSPACE and or HSPACE ATTRIBUTES to the images to separate them. The HSPACE ATTRIBUTE (added to the IMG SRC Tag), gives the amount in pixels between the images. If you want them separated by 10 pixels, therefore you would add HSPACE="5"> to each of the images.
The VSPACE ATTRIBUTE does the same thing, only it adds how much space is allowed ABOVE the image instead of to the side.

Graphics And Clip Art Sites

| The Basics | Basics Page 2 | Basics Part 3 | Basics Part 4 | Color Chart | Color Tester | Downloads | Geocities FAQ's | Font Viewer | Graphics Help | Gif Wizard | Helpful Links | Midi Tips and Tricks | Page Builder | Good Page Design Tips | Intro Page |Simple Frames | Tables |

Page Design, Content and Graphics
copyright ©1997 by
Sue Hunter EMT-S/IC
All Rights Reserved