Graphics/Images

Images or Graphics are what they're called. Spice of a weg page is what they are. Face it, when you arrive at a web site and it's nothing but text it's dull. When you hit a page with some snazzy artwork it's kewel! Graphics are a part of good web page design. Fortunately you don't have to be an artist to have some decent artwork on your page. You can use clipart. Clipart

Chances are good that if you visited your local Office Supply Super Store you could pick up a CD full of clipart for around $10.

It pays off to spice up your web site with some graphics. You don't need to use fancy expensive artwork. You can create simple headlines yourself easily with an inexpensive graphics program, or even right off the web for free. Check out the clipart sites, check out the graphics software and use what you can to make your pages a little more eye appealing.

Eventually you are going to need some graphics software. There are a gazillion programs out there. I like Paint Shop. It's a good program. Unfortunately it's a bit pricey at just under $100. Download it and get a 30 free trial if you care to. Search the web for others. What you need all depends on how often you are going to use it, and of course, what you are going to use it for.

For the web you will be using .gif and .jpg files. That refers to the extension of the file, like logo.gif or cindy.jpg. You don't need to know what they mean. Just know that the only two image types that will display on a web page are .gif and .jpg. The .gif files are usually graphics, like logos and such. The .jpg files are usually photographs.

Nothing on the web is ever plain. Graphics are good, visually good, but the type of page you create is going to depend on several factors. Depending on what your web site is about, your users are going to arrive possibly looking for a specific bit of information, or possibly looking for something you have to sell. The person who is strictly looking for a bit of information isn't going to care about design or snazzy graphics. If this is the type of site you have then it is best to simply avoid all graphics and snazzy design.

It's a good idea to keep your site organized. Keep it neat. One very good approach is to keep all of your graphics and images in a separate directory from the HTML pages. It may not seem important at first, but after you have 15 or 20 files uploaded to your site, things begin to get confusing.

If you were to write a book and each chapter had several files to it you could keep each chapter separate, creating a directory for each of them. Perhaps even a graphics directory inside each of those chapter directories.

So, at your site you'll have your HTML files in your base or public directory. Make a directory off that for your graphics. Call it graphics, images, photos, art or whatever you like. You'll generally also have a directory called cgi-bin which is where you'll have all of your cgi perl programs. You can create and use as many more directories as you wish. OK, so if I wanted to access a file called logo.gif that is in the graphics directory off of the chapterone directory my directory structure would look something like this URL:

Let's for a moment say we are on a web page called partthree.shtml that is within the /chapterone directory. If I wanted to get from /chapterone/partthree.shtml to /chaptertwo/partone.shtml I could do it two ways. First I could call the entire URL to the directory I am linking to, or, I could use a relative URL and step up one directory with two dots "..". That method would have a URL that looked like this:

I know that is a little confusing. It will sink in when you start to do it.

The Image Tag
<img src="/graphics//graphics/mylogo0.gif" alt="My Logo" width="200" height="100" border="2">

<img src="/graphics/http://www.yourdomain.com/graphics/mylogo0.gif" alt="My Logo" width="200" height="100" border="2">

That is the image tag you'll use to put an image onto your web page. Here I've shown you both the relative path, i.e., it simply calls the next directory down which is the graphics directory and then the file. The second is the complete URL to the file. Personally I like to use the complete URL. I find that over time I tend to change sites around. Move things around. Make changes. I have often found that numerous image calls needed to be changed. If you use the complete URL in the first place you don't have to worry about that later.

Here is another way to call something out. You'll find these methods used in web pages, when they are internal or within the same web site, and with images that are located within the same web site. Notice the ../graphics/mylogo.gif of it. What those two dots do is bring you up one directory. So for this line to work and display the logo, the page that you use that code on would have to be one directory down from the graphics directory.

Let's look at it piece by piece. IMG SRC= ... this is where you will call your actual image file. In the above case we're calling a graphic file called mylogo0.gif from our graphics directory. ALT= is the alternate text that you will see when you put your mouse over your graphic. Try it! WIDTH= and HEIGHT= are the dimensions of your graphic in pixels. BORDER= is used here just to include that attribute. It creates a border around your graphic. Setting this to zero will eliminate the border. When a graphic is used as a link the border will show up by default unless you specify BORDER="0". When you are simply displaying an image and it isn't a link no border is the default. I have included it here just for the sake of including all the attributes of the IMG SRC tag.

What on Earth are Pixels?
I'm so glad you asked! They are the nephews and nieces of the Elves in Santa's Workshop.

NO! Really, you didn't believe me did you?

Ok, you've heard the word, seen it mentioned here too. Let's explain it.

Think of a pixel as a little dot. It might help to realize that your computer monitor is really a lot of little dots each capable of taking on a color.

The standard web site banner ad is 468 pixels wide by 60 pixels deep, stated as 468 x 60. So a standard banner ad is 468 dots wide (left to right) and 60 dots deep (top to bottom). The overall number of dots displayed on your monitor is referred to as the resolution that your monitor is set to.

Here is a 468 x 60 pixel box. It is the same size as the "standard" banner ad you see all over the web.

Resolution is defined as something like 640 x 480, 800 x 600, 1280 x 1024 or 1600 x 1280. Obviously each of these resolutions is bigger than the next. Each generally refers to a larger monitor, but it also refers to the resolution of the monitor, that is, how much information is displayed on the screen at any one time. The resolution for your monitor can be set from the Control Panel under Display.

Let's try to simplify this some. Let's imagine we have a picture of the Grand Canyon. Imagine this photo to be wide. Let's say it's 24 inches wide. Now when it displays on the computer monitor how much of it will display on the screen without scrolling left to right? Well that's a big photograph. On an older monitor (or any monitor set to 640 x 480) we're not going to see much of it. We'll need to scroll left to right to see it all. On a newer monitor set to 1600 x 1280 we'll have 1600 pixels left to right to view this photograph. It might fit and we'll see the whole photo in one screen shot.

OK, so now for pixels. At 640 x 480 resolution you have 640 pixels horizontally and 480 pixels vertically displaying on your screen. At 1600 x 1280 you have 1600 pixels horizontally and 1280 pixels vertically displaying on your screen. An image that is 1600 pixels wide will fully display on the 1600 x 1280 monitor, however on any smaller resolution you'll need to scroll left to right to see the entire picture.

When you create a graphic such as the above mylogo.gif file, you will start off with a blank screen that you will have to set a pixel size to, such as 200 x 100 as above. Think this out before you start creating graphics. For a text graphic to really look decent you need to make it the size you want it to display on the screen. In other words, don't make a graphic 400 pixels wide and then resize it with the WIDTH= and HEIGHT= attributes of this tag, make it exactly the size you want it to be. When presented with a photograph or any graphic that is larger than you want it to be, use a graphics program to resize it to the size you want it to show on your page.

Let's take a look at the tag used in our basic web page.

OK, now that we've said all of that ... (you guessed it, another complication) images are larger than the text that would occupy that same screen area. They increase the overall size of your HTML document. That increases the time it will take for your page to download off of your server and onto your visitors computer. It increases your overall bandwidth usage also. Use images with an eye towards the overall size of your web page.