Now Let's Put it in Writing!

You should still be in File Manager

Let's change the > tag to image.gif" BGCOLOR="#FFFFCC" TEXT="color">. Remember, I am using Gray.gif. If you use a different image you need to type in the name of your image file. Spelling is very important here, as is upper and lower case letters. If you misspell or use the wrong case letters, your image will not appear.

You should keep choose a background color - bgcolor - the same as the predominant color in the background graphic so your page loads up with the correct background color before the graphic loads, or in case the graphic doesn't load at all. If you have a black background and have set your text to white, your visitor might not see anything if your black graphic doesn't load. By setting your bgcolor to black the white text would still be visible.

Here is what it should look like:

gray.gif" BGCOLOR="#D9D9D9" TEXT="color">

Welcome to My Homework Page

This is my homework page for BHS HTML Class. This is a lot easier than I thought.

I have learned how to add color, make text bold, make it small, and make it large. I know how to make paragraphs and soon I will know how to add a
break to a line where ever I want one.

You should visit Buffalo High School.They have great students, parents, faculty, staff, and administrators!

If you would like more information about the BHS HTML Class, you can send me an email.

Notice that I have changed the bgcolor to a shade of gray.

My page now looks like this:

[Your GeoGuide here] Welcome to My Homework Page This is my homework page for BHS HTML Class. This is a lot easier than I thought. I have learned how to add color, make text bold, make it small, and make it large. I know how to make paragraphs and soon I will know how to add a break to a line where ever I want one. You should visit Buffalo High School. They have great students, parents, faculty, staff, and administrators! If you would like more information about the BHS HTML Class, you can send me an email.

Images

Before you can put an image on a Web page, you need to know the name of the image file and upload it to your server.

imagename.gif">

My image is called "anikokosaxgif".

The HTML for my image will read like this:

<IMG SRC="anikokosax.gif">

The picture looks like this:

Of course you would substitute the name of your image where appropriate. Note that there is no closing tag required on this tag.

There are two types of images usually used on web pages JPGs and GIFs.

JPEG OR JPG:

A graphics format developed by the Joint Photographic Experts Group. This format compresses the image, with some data loss depending on the degree of the compression. Used frequently for photographs. Quality of the JPG images are good with image file sizes being a good bit smaller than comparable GIF format images, making it nice for using with the aforementioned photos and with large images or ones with a large number of colors.

GIF:

Graphical Interchange Format, a graphics format developed originally by CompuServe, used mainly for computer-generated graphics such as buttons and bars and clip art style images. It is limited to 256 colors and since the compression is less than for JPEGs, GIF's take more space.

GIF 89A :

This type of gif is one that deserves separate mention. GIF 89A's are "transparent", what this means is that they have been manipulated in such a way that they seem to float on the page. These are the type of gif you will want to use for most images on the WWW.

Animated GIFS:

Another GIF with a note of its own, Animated gifs have become VERY popular lately and are an easy way to get some motion on your web page. These gifs are created by using special software.

Sometimes people accessing your web page will be using non-graphical browsers, have the image viewing turned off, or may be visually impaired. To make your page accessible to these visitors you should include ALT text within the IMG SRC tag. ALT text is a brief description of the image.

ALT="anikokosax">

By including the ALT="anikokosax", people viewing without ability to see images will at least know that a picture is on the page in that location. This can be a particularly important consideration if you are using graphics as navigational icons.

Additionally, if you are using graphics, it helps browsers read your page faster to include the height and width of your image in the tag:

HEIGHT="36" WIDTH="72">

You can usually determine these attributes by viewing the image with your graphics program. Most show the height and width of the image displayed.

There is much more to consider about choosing and using images that should be reviewed by anyone creating web pages.

For example, loading very large images with a web page should be avoided as it can take way too long to have them come into view.

Some Additional Graphics Terminology:

Thumbnails:

Small size images placed on a web page, usually as a link to a larger counterpart. This gives the visitor the option to take the time to view the larger image at their leisure.

Icons:

Small graphic representations used for various purposes, such as a picture of a house used as a link back to a home page or a small picture of a speaker to indicate a sound file.

Buttons:

Similar to icons, used to provide a way to move around a web page, buttons are places upon which you "click" to be taken to other parts of the web site.

Bullets/Balls:

Small graphics, frequently round in shape that are used to set off items, such as a list of links.

Bars or Rules:

Graphics which divide the page horizontally. Can be a simple line, much like the

---

tag but are frequently more ornate and complex. Those yellow and black "construction site" bars are a good example! Whenever you want a simple horizontal line, just use the

---

tag. You do not use a closing tag with the

---

tag. It will appear like the one below.