Graphics

General Information concerning graphics on the web
Horizontal Lines
Pictures (including clipart)
Pictures as links
Backgrounds and Colors

General Information

1. GRAPHICS MUST BE IN .GIF OR .JPG FORMAT! If they're not, viewers will see a little box with a question mark in it rather than your beautiful picture. This rule applies whether you are using a photo, clipart, or using the graphic for background.
2. Which format for which graphic? In general you should use JPG's for photos as they will not take up as much disk space. JPG's can also be used as clipart and other graphics. So, you could use JPG's all the time. HOWEVER, clipart usually has a smaller file size if you save it as a gif. A gif file will use 256 or less colors. If you have a graphic of a black cat with yellow eyes, you could save it with the information for only 3 colors (black, yellow, and white) and save lots of file space. Plus, gif files can have transparent colors. What does it mean to have a transparent graphic? Compare these two graphics. The one on the right is transparent. It does not have a box around it and seems to float on the page. Transparent GIF's allow the graphic to use its own outline rather than a box.
3. Watch your disk space. Be careful about hogging too much disk space as graphics are very large. You may want to share graphics like bullets and lines with friends or within departments. Avoid sharing graphics from other sites than Cameron. If you put a reference to some graphic on a server in Montana, and that server is down, your graphic will not appear. Note: If you are using a public_html directory in your cuok or wolverine account, you have a disk quota. If you go over your quota, you will receive a mail message and be given one week to clean up your directory. If after a week you are still over your quota, your account is locked from creating any new files.
4. Consider your viewer. Most people viewing your page will be on a modem that downloads very slowly, particularly if they only have a 14.4 modem but even if it's a 56K baud modem. Use graphics only if they add to your page. It may be a good idea to create links from your main page to pages with photos. For example, you could have a link that says something like "Click here to see my twin boys." If a person wants to take that option, they can click there and see your picture rather than sitting and waiting impatiently as the picture downloads on your main page. In fact, if a person has to wait too long, he may easily click the "Stop" button and go onto someone else's page.

Horizontal Lines

<HR WIDTH=#>

You can preset the width of your line in pixels or in percentage just as you do the width of tables. By using this option, you will be able to control the placement of your line as well by putting ALIGN=center, left, or right in the HR code as well. The HTML code of <HR WIDTH=80% ALIGN=center> would produce the following result.

---

<HR SIZE=#>

The size amount in pixels indicates the height of your line. SIZE=3 is usually a good size but you may want an even thicker line. Here are some samples:

SIZE=3

---

SIZE=5

---

SIZE=10

---

<HR NOSHADE>

You can create a solid black line using this comand. Here's a sample of <HR WIDTH=50% SIZE=5 NOSHADE>

---

Pictures and Clip Art

That's Graphics 101. Netscape automatically wraps any text around your graphics. If that's all you wanted to know, then you're set to go. But like everything else, there are a few things you can do if you want more control of your graphics.

ALIGN=left, right, top, middle, bottom

You can indicate the placement of your graphic within your page or text by using the align code. The default is bottom. The easiest way to explain this is to simply demonstrate it. For the demonstration, click here.

ALT="text"

Since text based browsers cannot view graphics, you'll need to give them an alternate text version describing your graphic. For example, <IMG SRC= "images/uparrow.jpg" ALT= "Return to Last Page">. A common alternate for balls used as bullets is <IMG SRC= "goldball.gif" ALT= "*">. Sometimes your graphics are simply for looks such as lines. If your graphic doesn't really carry a message you may want to just put ALT= " ". Without this alternate, text based browsers will put [image] each time there is a graphic.

Clickable Graphics

<A HREF= "http://www.cameron.edu/~julie/"><IMG SRC= "images/juliepic.jpg ALT=Go to Julie A. Duncan's Page"></A>

Backgrounds and Colors

<BODY BGCOLOR= "ffffff">

BGCOLOR tells Netscape the background color to use. The six letters or numbers indicate which color. A note on color backgrounds. Try them out on monitors other than your own before you decide on a final color. Colors on a 256 color monitor versus a 16 million color monitor differ drastically. Believe it or not, they even differ some between browsers.

Netscape uses 216 colors that will not dither. (A dithered color would be where two or more of the non 216 colors are dotted close together to form the appearance of another color.) This mainly affects monitors using 256 colors. Your monitors set to hi-color will be able to show any of your colors without dithering. To assure that your colors are more likely to look the same on another monitor, you won't to use the non-dithering colors as much as possible. Take a look at this site to see Netscape's 216 non-dithering colors: http://www.lynda.com/hexh.html (about 235K so may take a while to download)

If you're not worried about dithering, the choice of colors goes on forever. The above color of "ffffff" produces white. There is a site in the UK that lets you choose your text color and background colors and then click on show me to see what it looks like as well as what code to use in your document. It takes a little longer to use since it's in the UK but it's definitely quicker than changing the code in your file, viewing it in Netscape, deciding you don't like the color, changing the code in your file, viewing it in Netscape, deciding you don't like it....Here's the UK place.

<BODY BACKGROUND= "images/graphic.jpg">

Here's where you can create some really cool and interesting backgrounds for your documents. Netscape can take a small graphic and repeat it over and over until it fills the page. You've probably already seen lots of sites with backgrounds, but just in case you haven't, you can click here for a sample. You can use absolutely any graphic for tiling, but remember that you still have to read text on top of it.

Your color codes are the same as for BGCOLOR. Simply replace "ffffff" with the color of your choice.

<BODY TEXT= "ffffff">document here</BODY> changes the text color.

<BODY LINK= "ffffff">document here</BODY> changes the links color.

<BODY VLINK= "ffffff">document here</BODY> changes the visited links color.

<BODY ALINK= "ffffff">document here</BODY> changes the active link color.

Coloring one or two words of text

Graphical browsers have the possibility of changing the text color of only a few words. Indicating a color of text within the body code changes the color of all text. You can use the <font> code to change the color of only a few words.For example, if you want your headline to be in red, you would use the following code:

<FONT COLOR="ff0000"><H1>Headline</H1></FONT>