1. Try to use as few colors as possible and try to use colors from the 216 color browser safe palette when possible. Most quality graphics programs should allow you to limit your graphics to these colors. Not only will this help maintain a manageable file size, but will also ensure that the image looks good on virtually any monitor. The graphic above uses more than the 216 colors and does not look as good on older computers set to display on 256 colors. Sticking to the 216 colors may not always be desirable, especially when using JPG files for photographs or high quality graphics. Most computers can support at least 16 million or so colors.
2. Graphics can take up huge file sizes, meaning long download waits for those of us with slow connections (most viewers). Most viewers will wait only a few seconds for a web page to load before hitting the back button, never to return. As a rule, the smaller the dimensions (height and width) of an image, the smaller the file size. The lower the resolution (dots per inch) the smaller the file size. Fewer colors will also help keep file sizes down.
3. The GIF format only uses 256 colors, so use it for simple graphics such as banners or text effects. The JPG format can use millions of colors, so it is preferred for photos or high-detailed, multi-colored graphics. These, however, may not appear as you wish on older monitors. The PNG format is new to the web and is very similar to JPG. Use it with caution, not all browsers yet support it.
4. Animated images, which can only be GIF's, can take a lot of disk space. The CLINTON animated GIF above would take 8 seconds to load on a 28.8 modem. Be aware of your audience when using animation.
5. With a graphics program, you can make portions of a graphic transparent, so the background shows through. You can also change the color of parts of a graphic to the same color as your background to simulate this effect. The JPG format does not support transparency.
6. Blurring a JPG will decrease its file size. Blurring a GIF will increase its file size.

SAVING IMAGES
To save graphics from the Internet, find the graphic that you want to save. If it is on the Internet, it will already be a GIF, JPG, or PNG. Place your mouse over the graphic, right click, and select SAVE IMAGE AS..... It is easiest to save the graphic to the same folder as your HTML document for ease in writing the image tag.

If you have a graphic that you would like to use, but it is not in a proper format, open it in a graphics program. Click on File, then Save As.... If the graphic has less than 256 colors, you can then save it as a GIF. If it has more than 256 colors, you must save it as a JPG. You can then use the converted graphic in your web page.

INSERTING IMAGES
To insert an image in your webpage use

<IMG SRC="image.ext">
where image.ext is the file name (duck.jpg, for instance). This format is for an image that is saved in the same directory as that of the HTML document.
On this server, in the same directory as the page you are reading, I have saved a graphic called duck.jpg. To make it appear in this page, I would simply type
<BR><IMG SRC="duck.jpg"> and get.

The <BR> places the graphic on a new line. This is a relative reference to where the graphic is located. The graphic is NOT part of my HTML document. I am merely making a reference to where it is located. My browser goes to that location, finds the graphic, and places it the browser where I made the reference in my HTML document. By default, my browser begins looking in the same directory that the HTML document is located in. To move forward, into another folder or directory that is within the current directory, make the reference like this:
<IMG SRC="images/duck.jpg"> Be sure to use the / at the end of the folder name, then give the entire image files name.
To move backward a directory or to the parent folder of the one that your HTML document is in, use
<IMG SRC="../duck.jpg"> The two periods(..) tell the browser to look in the directory above or containing the current folder. These reference elements can be repeated as well, to move up two directories, use SRC="../../duck.jpg. To move into two additional directories use something like SRC="images/birds/duck.jpg". You can also link to graphics saved anywhere out on the Internet. Anyone on the Internet could link to the duck graphic by telling their browser where to find it. They would never have to save it on their computers. The SRC in this case is an absolute reference instead of a relative reference to where the image is saved.
<IMG SRC="http://smithplanet.com/batc/duck.jpg">
would display the duck graphic on any web page that contained this HTML reference. However, if I ever remove this graphic from the the Internet, all references to it would then display
This means that I have referred my browser to a graphic that does not exist.

IMG ATTRIBUTES
There are many attributes that you can use to control the appearance and positioning of yourimages.

SIZING
Browsers will normally display images at the same height and width at which they were created. To set the size of the graphic in the browser window, use the WIDTH and HEIGHT attributes of the IMG tag.

<IMG SRC="duck.jpg" WIDTH="72" HEIGHT="72">
would display

There are approximately 72 pixels per inch, so this graphic should be about 1 inch X 1 inch. REDUCING THE SIZE IN THE BROWSER DOES NOT DECREASE THE FILE SIZE OF THE GRAPHIC, MEANING IT WON'T DOWNLOAD FASTER!! You would be better off using a graphic program to reduce the dimensions of the actual graphic then using the size attributes to change how it appears in the browser. Changing the physical dimensions in a graphics program WILL reduce the file size. HINT: WHEN CREATING OR EDITING IMAGES, SAVING THEM WITH THE SAME DIMENSIONS THAT THEY WILL BE ASSIGNED IN YOUR HTML DOCUMENT WILL MAKE FASTER DOWNLOADS.
ANOTHER HINT: EVEN IF A GRAPHIC IS SAVED WITH THE CORRECT HEIGHT AND WIDTH, STILL SPECIFY THE HEIGHT AND WIDTH ATTRIBUTES.
These HEIGHT and WIDTH attributes tell the browser exactly how much room the graphic will take before it is even downloaded. If they are specified, the browser can display the rest of the page while the graphic is loading, then insert it once it is loaded. If the size attributes are not specified, then the browser must wait for it to load before moving on to displaying the rest of the page.
Be careful with the size attributes, images can begin to look very weird if they are set at different proportions than those of the saved graphic.
Enough said!! HINT: Your graphic will load faster if the WIDTH and HEIGHT attributes are the first attributes listed after the SRC attribute.

BORDERS
To add a border to your image, add a BORDER attribute..
<IMG SRC="duck.jpg" WIDTH="72" HEIGHT="72" BORDER="5">
would display

The BORDER value is the width of the border in pixels. You cannot specify the color of the border. Most new browsers will display it in a color complementary to your background color, usually as the color of the surrounding text.
HINT: IF A GRAPHIC IS ALSO A LINK, IT WILL USUALLY HAVE A BORDER. DON'T CONFUSE YOUR VIEWERS.

ALTERNATE TEXT
The ALT tag will designate alternate text. Viewers that cannot, or choose not to view graphics will instead see the alternate text. ALT text also offers a tool tip when the mouse is held over the image.
<IMG SRC="duck.jpg" WIDTH="72" HEIGHT="72" ALT="I am a cute duck!">
would display

The duck looks normal, but if you place your mouse over the graphic you will see the ALT text. The ALT tag is required in HTML 4, however, if you don't use it, everything will still work fine.

WRAPPING TEXT
To wrap text along side a graphic, use the ALIGN attribute. Its values can be either LEFT or RIGHT. By default, your browser will display your image as if it were a character in your text. That means that you can only align one line of text along side the image. The ALIGN=LEFT or RIGHT allows several lines of text to wrap around your image.
The value of left will place the image to the left browser border and will wrap the text to the right of the graphic as seen in this paragraph. The value of right will do just the opposite. There is no ALIGN value of CENTER, meaning that if you center a graphic, you can only wrap a maximum of one line of text. Bummer, huh? In your HTML source, be sure to place the image before the text that you want to wrap around it, even if it is right aligned.

The ALIGN attribute will affect all the text that follows the graphic, meaning that all following text will wrap around the image by default. If you want to wrap only a small portion of text, you must use the <BR CLEAR="left, right, or all"> tag. This tag (which is just the normal <BR> tag that we have used before, but now with a new attribute) will insert breaks or blank lines until the specified margin (left, right, or all) is clear, or open. "ALL" indicates that it will insert breaks until both margins are clear.
I would insert a <BR CLEAR="left"> at the end of this sentence in my HTML code to have the text wrap stop until the left margin is open.
See how that works? Now, I could have just inserted a couple of normal <BR> tags, or a <P> tag or two, but remember that the spacing will appear different in different browser windows and I might insert too many or not enough blank lines. Adding the CLEAR attribute is certain to give you results you want.

ALIGNING TEXT
A few paragraphs ago, I mentioned that, by default, only one line of text will wrap around an image, unless you use the ALIGN=LEFT or RIGHT attribute. If you do want to have only one line of text wrap, you can specify where at the image, it will wrap. This is also accomplished with the ALIGN attribute. Instead of using LEFT or RIGHT, we will use one of the following values: TEXTTOP, TOP, MIDDLE, ABSMIDDLE, BOTTOM, or ABSBOTTOM. To see how these values will affect the one line of wrapping text, CLICK HERE. Click the BACK button to return here.

You can only use one of these attributes at a time and it will only affect the text that immediately surrounds the image. These six attributes treat the image as another character in the text. They only specify how the text will appear in comparison to the image. IE seems to change the TEXTTOP value to TOP. Older browsers may not recognize these values at all.

CREATING A BUFFER
To add blank space around a graphic, use the HSPACE and/or VSPACE attributes. Their values are in pixels. HSPACE specifies the amount of blank space on the left and right of the image. VSPACE specifies, in pixels, the blank space or buffer at the top and bottom. This left aligned graphic has HSPACE and VSPACE values of 30 pixels. Internet Explorer defaults to a buffer of 4 pixels to the right of images, but the HSPACE attribute overrides that value. The entire code for this graphic is:
<IMG SRC="duck.jpg" WIDTH="72" HEIGHT="72" ALIGN="left" VSPACE="30" HSPACE="30">
Whew! That's a lot of attributes and all of the IMG attributes that we are going to cover right now.

PIXEL SHIMS

Sometimes it is impossible to place items on your page where you want them using the HTML that we have learned thus far (which by the way is enough to design great web pages). The use of pixel shims can sometimes aid in the layout of your page. To the right of this paragraph is a 50 pixel by 100 pixel graphic that was colored the exact same color as the background of this page. Don't believe me? Put your mouse over there and right click and you will have an option to save the image. I called it shim.jpg. The cool thing is that it loads very quickly and is virtually impossible to see. Now, I could have used the SPACER tag to do the same thing, but Internet Explorer doesn't recognize it. Using this pixel shim is guaranteed to make my page look the way I want it in all browsers. You can also make pixel shims transparent and use them on any background color or image and the background will show right through it. One pixel shim can be used in many places and circumstances, just just change the WIDTH and HEIGHT attributes to fit your needs.

HORIZONTAL RULES
Horizontal rules are a type of graphic that can help in dividing your web page into sections or areas. One appears just a few line up from here. The tag to insert a horizontal rule that looks like the one above is <HR>. You can further format the HR by using the following attributes:
SIZE="n" where n equals the height of the rule in pixels.
WIDTH="w" where w equals the width of the rule in pixels or as a percentage of the browser window. Default is 100%
ALIGN="left, right, or center" tells the browser where to display the rule. Applicable only when the width is less than 100%.
NOSHADE This attribute is a rare one that has no values. The NOSHADE attribute tells the browser not to add shading to the rule.
<HR SIZE="5" WIDTH="70%" ALIGN="center" NOSHADE>
would display

BACKGROUND IMAGES
To add an image as a background, add the BACKGROUND attribute to your <BODY> tag like this:
<BODY BACKGROUND="image.ext">
Again, this is a relative reference to an image in the same directory as the HTML document. The same reference rules apply as with the IMG tag. Background images cannot be animated. If you design your own backgrounds, try making them with little contrast and either very dark or very light and use contrasting font colors in your document. Backgrounds can make or break a good web page. If the background image is smaller than the browser window, it will be tiled. There are many free backgrounds available on the Internet that will tile beautifully and look great. Some will not look great. Be careful! The BACKGROUND attribute will override the BGCOLOR attribute, however, if your background has transparency, you can also specify a BGCOLOR that will appear through the transparent portions of the BACKGROUND image.
For a cool effect in Internet Explorer, use the BGPROPERTIES="fixed" attribute in the BODY tag. This will create a watermark background that will not scroll with the text. For an example of a well-designed, tiling background CLICK HERE. This background will be fixed if viewed with IE.

THAT'S ALL FOR NOW. YOU HAVE NOW LEARNED THE MAJORITY OF THE HTML THAT WE WILL BE USING. IT GETS MUCH EASIER FROM NOW ON. HAVE FUN!!!

Back to Class Homepage.