Navigation
Bullet Bandwidth
Bullet Copyright Laws
Bullet Website Design
Bullet Imaging
Bullet Win Awards
Bullet Site Promotion
Bullet Spyware
Bullet No Right Click
Bullet Moving WebSite?
Bullet User Friendly?
Bullet Building an AP
Bullet HTML Color Picker
Bullet Characters
Bullet Home
Bullet Main Website

Imaging

 

It seems that many people just starting out are having problems getting their images to show properly on their website pages. So in an effort to help them, I decide to publish this page.

Placing An Image On Your Page

The coding to place an image is constant. Your will use the same format every time for every image placed on your pages. It might be a good idea to talk about where to store everything on your website server as well, because you're starting to call for additional items on your pages and fill up your storage space.

Now it's not as bad as it sounds. As there is a way to store your images in a separate directory called a "subdirectory" for all your images. The best way to do this is a create a subdirectory called "images". The subdirectory should be created and stored in your main directory.

Directory Example:

Main Dircectory

main directory

Main Dircectory

images (your subdirectory)

 

your webpages.html

The arrows you see in the example will not show in your directory of the website. I used them to show the directory and subdirectory names. Most generally though, the main directory only shows the files within it and does not have a name at all.
Here's the format for placing an image:
<IMG SRC="images/bullet.gif" ALT="some text" WIDTH=113 HEIGHT=27>
By replacing "bullet.gif" with "homepage.gif", one of my own graphics, you get this:
Home Page
 
Here is What is Happening

IMG stands for "image." It tells to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.

SRC stands for "source." This is an attribute, a command inside a code. It's telling the browser where to go to find the image. Which tell the browser to look for the image in the "images subdirectory". This way you can call for the image by name with just the subdirectory name in front of it, like this: /images/imagename.gif.

The image.gif is the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).

ALT stands for "alternate text". This tells the browser that if it can't find the image, then just display this text. It also tells anyone who can't view your image what the image is about. For example a disabled user using a screen reader. When you mouse over the image, the alternate text pops up.

The "some text" is where you put the text describing your image.

WIDTH stands for the width of the image in pixels. It can range from 1 pixel to, well, just about any number, but generally will be less than the width of the web browser.

HEIGHT stands for the height of the image in pixels. The height can be just about anything, but generally will be less than the height of the web browser.

 
Image Formats

There are four basic formats you will find on the Web. Each is denoted to the browser by a different suffix. Remember the suffix name will always look something like this: name.suffix.

.gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. I have always said "gif". This is short for Graphics Interchange Format. The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Browsers can handle this format quite easily.

.png Pronounced as 'ping', this stands for Portable Network Graphic. This is ultimately the replacement for .gif, with partial transparency options, but browser support is sketchy. Some browsers still don't like to display .png files.

.jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. It saves on hard drive space, but also tends to require a bit of memory on your computers part to unfold the image.

.bmp (pronounced "bimp") This is a "bitmap". You will probably never place a bitmap as an image, although some browsers do allow it. A bitmap is an image that a computer produces and places for you. A counter is an example. Even though some browsers, such as Internet Explorer, will allow you to place a BMP as an image, I wouldn't. Most browsers will not be able to display it. Go with .gif, .jpg or .png.

 
Activating An Image

Okay, this gets a little fancy. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here we're going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on the hyperlinked words, to make the hypertext link. I'll make a link to my home page using the image above. Here's the format:

<a href="http://seawell.net/msap/"><img src="images/homepage.gif" alt="Home"></a>

Look at it again. See what happened? I placed an image tag where I would normally have placed words. However, in case the image isn't visible for any reason I've added some alternate text stating where the link goes.

Here's what you get with that format. Lay your pointer on the image, but don't click. You'll see the entire image is active:

Home

But what's with that new border around the image? That's what happens when you activate an image. It attempts to turn blue, or whatever color the page is set to, like the wording it's replacing, so it places what's known as a "border" around the image. Some people like it. I don't, and I know how to get rid of it.

To make the border disappear, you need a tiny bit of inline CSS (Cascading Style Sheets). This used to be done using the Border attribute, but that's unfortunately no longer with us. What do I mean by inline CSS? Well, it is place within the code of the image.

Here's the CSS coding:

<a href="http://seawell.net/msap/">
<img border="0" src="images/homepage.gif" width="113" height="27"></a>
For the above image, I added some CSS that denoted that there should be no border. Note that the CSS is in quotes.
Here's what you get using the CSS:
Again, place your mouse pointer over the image without clicking. You'll see that it is active but doesn't carry that annoying blue border.
That is the end of this lesson.
 

Win Awards ]

 

Bandwidth | Copyright Laws | Website Design | Imaging ]
[
Win Awards | Site Promotion | Spyware | No Right Click ]
[
Moving WebSite? | User Friendly? | Building an AP ]
[ HTML Color Picker | Characters ]

[ Home | Main Website ]

 

Divider Bar

 

Established January 1, 1998
Content & Images by Morning Star -

Email: Morning Star