This page: Topic 6.

SURFING IN THE DARK ...A Beginner's Odyssey
1. INTRO,
RESOURCES,
TOOLS		 2. HTML BASICS 5. TABLES 8. JAVA SCRIPT
3. APPLYING HYPERTEXT 6. GRAPHICS 9. MIDI MUSIC
4. COLOR 7.COUNTERS .

GRAPHICS

(If you're viewing a hard copy, you may find this article on the
internet at URL: http://www.primeshop.com/html/jumpidx.htm )

You're invited to visit the Primeline Website at http://www.primeshop.com/ Come see us!

ON THIS PAGE:
Remarks
Backgrounds, Borders
Background Tutorial		 Webpage Images
Animations
Imagemaps		 Grouping Graphics
Color Reference Chart
Blank Image

This portion of the article focuses on how to add graphics to your web page, and is not a treatise on creating graphics!

Graphics include all types of drawings, photographs, backgounds, etc. used to add color and visual interest to a web page. They are usually static, but new programs allow the creation of animations, too!

Browsers will support graphics in the JPEG (i.e., logo.jpg) or GIF (i.e., logo.gif) formats. The .gif format is usually preferred because it provides sharper images and requires less memory. These remarks focus nearly exclusively on ".gifs" as the preferred type.

Most viewers and graphics programs will allow you to interchange these formats for any given image.

There is a comprehensive list of resources for both html and graphics at our website page:
[ http://www.primeshop.com/linklist.htm ]

Xara 3D
As a rule, we don't engage in gratuitous advertising, but take a look at this logo from our pages. It was created in just a few minutes with Xara 3D, which we view as one of the finest software bargains available anywhere! Here's yet another example:

The program is very inexpensive, yet allows for fast & easy creation of animated text and countless variations in font, colors, gloss, background, size, depth, shape, orientation, and light angles. And - it saves outstanding image quality in small file sizes, and offers a 15-day free trial.

~ BACKGROUNDS ~

It's easy to make your own tilable backgrounds - see our Background Construction Tutorial.

There are gazillions of backgrounds available on the 'net, or you may create your own. Typically, a background image is very small, perhaps 50x50 pixels and under 2kb...the smaller the better..., so it will download and fill the page very quickly. Large images require considerably more time. Most background designs are devised so be "seamless", that is, so that the four sides match one another and fill the page with an uninterrupted pattern. The browser will automatically "tile" many repeats of the backgound image into a seamless patten.

Specify your chosen background in the web page <BODY...> tags. For the background image "bugs.gif", you'd specify:

<BODY BACKGROUND="bugs.gif">
...with one space between the additional tag attributes. Be sure that the image resides in the server in the same directory as your web page, or add the path to the command, e.g.,
<BODY BACKGROUND="myimages/bugs.gif">
Wild backgrounds are great behind images, but they can make it really difficult to read parts of the text. Background complexity or pattern aren't the issue. A problem arises when a background varies from very light to very dark, or from a contrasting color to a near-match, and renders your text invisible. Bold or oversized text can help to overcome this effect, but be careful not to overwhelm your visitor!

A New Trick ( 1/2/98 )
Here's one we just learned the hard way....
The use of a solid color BG with a different color for table borders can be very effective. Nothing new - except - we discovered that a tiny graphic for the background color image was a big mistake. The actual page background we tried is just a black square, named "blackbg.gif", and called for in the BODY tag, as is the BGCOLOR for table borders.

We had originally made the black background image very tiny at 2x2 pixels - everyone knows that small images load faster, right? Well, that's true, but we learned that repainting that little image (333bytes) was eating up user's RAM and making their CPU chips work overtime! There were just so many repeats required to cover the page that visitors' computers were overwhelmed.

Consider: At 800x600, a screen displays 480,000 pixels. If we used a 2x2 image for the bg, then the computer was trying to repeat that image 120,000 times - and keep track of the location info for each repeat! Not less than 40mb of information!!

We simply changed it to a much larger area of 100x100, which required only 460 bytes in filesize, but reduced repeats from 120,000 to 48 - which virtually any user's machine can easily track and scroll.

The difference, of course, is that most page images appear only once, but a BackGround image is tiled over and over again until the screen is filled. Since the BG image may actually be an image and not just a single color, the computer must also keep track of the location of each pixel in each tiled repeat of the image in order to accomplish smooth scrolling. Very tiny tiled images require continual reprocessing of a mountain of information.
Lesson: Never use a super-tiny image as a background!

~ BORDERED BACKGROUNDS ~ ( 9/25/98 )
You may wish to use a bordered background - that is, one with a figure at the left - and then center the remainder of your page content in the open space to the right. Special table construction is required, as discussed in this offset tutorial.

~ OTHER IMAGES ~

Additional specifications for both .jpg and .gif files which affect download time:

All images (except background) included in your page will be called by the <IMG SRC="xxx"> tag, i.e. 

		<IMG SRC="bigbugs.gif">
At minimum, the <IMG> tag requires the SRC (source) attribute. The SRC attribute is defined as the complete image definition, including path (if needed) and image filename, i.e., <IMG SRC="graphics/mypix.gif"> The <IMG....> tag does not require a closing tag.

Addtional optional attributes within the image tag include:

A special invisible image ("blank.gif") may be used as a spacer for text and graphics. It's explained here.

Height and Width are Critical
Ever wait forever for someone's page to load, and then get the whole thing at once? It's aggravating, and frequently sends visitors away. You can avoid this "mark of the amateur" by using interlaced images (as above) and by always specifying both HEIGHT and WIDTH for your images.

Here's what happens: If you specify H&W, then the computer will reserve space for each image before it's downloaded, and immediately insert all of the text in its proper place, then just as quickly go back and get the first pass for the interlaced images. Your visitor has something interesting to see or do right away. The entire download process still takes just as long, but it looks as though something's going on and your visitor isn't bored or impatient.

Filesize
The rule of thumb is that any image file over 20kb is too large to download efficiently...people just don't want to wait for them. 5kb or less is ideal. If you've a very large image, post a thumbnail (tiny reproduction) on the page instead, and hyperlink it to the full-sized image for those who really want to see it. (Caution: simply re-scaling an image with HEIGHT and WIDTH attributes so it looks smaller will not change its filesize or download time! Instead, resize the image in a graphics program and save the smaller version with a different file name.)

The two major factors affecting image size (in kb) are its literal dimensions and the number of colors used. Try to redimension to the actual size intended on the page, and then move on to color reduction to make the file even smaller. You never need more than 256 colors, and may easily get away with 16 or less. Color reduction is likely to cut file size (and download time) by 30-70%!!

Examples
Let's say you've placed an image named pic1.gif in your server file which was saved in interlaced .gif format; it's actually 50x60 pixels; and you want to display it at 1/2 size at the right margin of the page with a 3-pixels-wide border. Your html would be:

<IMG SRC="pic1.gif" HEIGHT=25 WIDTH=30 BORDER=3 ALIGN=RIGHT>
Note the use of the one-half values for height and width to make the image look smaller physically.

Next, let's say you want to hyperlink it to another web page by adding an anchor tagset:

<A HREF="http://www.someone.com/theirpage.htm"><IMG SRC="pic1.gif"
HEIGHT=25 WIDTH=30 BORDER=3 ALIGN=RIGHT>Visit Them!</A>

If you needed to, you could insert that entire hyperlinked command line into a table cell.

The ALT Attribute
You've seen that ugly default image when a download went bad and left you wondering what the image was supposed to be. Get around the problem on your own pages by adding a text description for each image within the <IMG> tag. For instance, if it's a button image linked to the top of the page,
add ALT=" [ home ]" to the image tag something like this:
<IMG SRC="button.gif" ALT="[ home ]">
The intended text must be enclosed in quotation marks.

Some people turn images off when browsing because, perhaps, their modems are slow and they can't afford to wait for "the pretty stuff." Your text descriptions will enable them to visualize and navigate your page even without pictures. In addition, the Microsoft Internet Explorer will return the contents of the "ALT" element whenever the link is highlighted by the mouse pointer.

Space Around Images
You may create free space around any image by adding the HSPACE (horizontal spacing) and/or VSPACE (vertical spacing) attributes. For example, if you wish to place two images side-by-side but not touching, you could separate them by adding the attribute HSPACE=3 to each image tag. The result would yield 6 pixels between the two (3 for each one.) You may ensure space above and below with the VSPACE attribute.

Here's an example with both:
<IMG SRC="mypic.gif" VSPACE=4 HSPACE=2 HEIGHT=10 WIDTH=15 BORDER=0>

Animations
If you've a graphics program such as Paint Shop Pro, you can create a series of differing .gif files, and then paste them together with an animator. The grouped images will download as a single .gif file, but the browser will "play" them in sequence. We frequently use GIF Construction Set from Alchemy Mindworks, Inc. Caution: An animation consists of a group of single images, and its filesize can escalate quickly!

ImageMaps (12/31/97)
Imagemaps are difficult to make without a mapping program. We've had a really good experience with both the company and the program WebHotspots, from 1Automata. The program will not only enable imagemap creation, but writes the relevant html for the image as well.

An imagemap program creates "hot" spots within a specific parent image by assignment of coordinates and a reference ( HREF=xx) for any specified (mapped) area in the parent image. You can imagine that there would be four coordinates, for example, to define the position of the four corners of a rectangle. (The program can also create complex coordinate sets for non-rectangular images.)

Consider the rectangle 1-2-3-4, representing a part of the overall parent image. The four points 1, 2, 3, & 4 will be defined as mathematical coordinates within the parent. Each coordinate set is defined with numbers, for instance "1, 2, 3, 4" might be "0,168,99,191" No matter where the parent image is placed on the page, the coordinates for "1-2-3-4" will always be located relative to the parent image itself. The number values are in pixels of displacement as measured from the upper left corner of the parent image.

To add to the confusion, the defined coordinates in this case are only two points - 0,168 and 99,191 - defined as the two opposite corners of the simple rectangle for that mapped section. Since the shape is rectangular, only two corners are required to define the entire shape.

For complex shapes, the coordinate definition can become quite long. (The definition "tells" the browser: ""to define this shape, go here, then here, then here..", etc. ad nauseum ad infinitum, "...and associate the area inside that shape with this reference.")

You can see that trying to mentally determine the value of the four numbers can be very confusing - which is why a mapping program will be of great help!

The entire area within a set of coordinates will become "hot" and link to the reference location ( HREF=) you type in. Areas may be separated or even made to overlap, since each set of coordinates is managed as an independent section of the image.

You may use simple rectangles, circles, etc, or even freehand trace complex portions such as flowers, eyes, balls & toys, etc. (Naturally, the program can't "see" those objects - it just notes the areas you define with your mouse.)

As another example, here is a complete map for this single image, which looks like a set of 8 buttons:

<IMG SRC="qwkstak5b.gif" WIDTH=100 HEIGHT=192 USEMAP="#qwkmap2" BORDER=0>
<MAP NAME="qwkmap2">
<AREA SHAPE="RECT" COORDS="0,168,99,191" HREF="news.htm">
<AREA SHAPE="RECT" COORDS="0,144,99,167" HREF="users.htm">
<AREA SHAPE="RECT" COORDS="1,120,99,143" HREF="business.htm">
<AREA SHAPE="RECT" COORDS="0,96,99,119" HREF="search.htm">
<AREA SHAPE="RECT" COORDS="0,72,99,95" HREF="cool.htm">
<AREA SHAPE="RECT" COORDS="0,48,99,71" HREF="history.htm">
<AREA SHAPE="RECT" COORDS="0,24,99,47" HREF="service.htm">
<AREA SHAPE="RECT" COORDS="0,0,99,22" HREF="default.htm">
</MAP>

You can see that the overall image, in this case "qwkstak5b.gif", is placed on the page in the first line, and contains the instruction to use (associate) a named map (qwkmap2) in reference to this parent image. The next entry begins the named <MAP>, which is defined as a set of coordinates plus an anchor to specify each mapped link area within the parent. The map definition is finally closed with the </MAP> tag.

In this example, the program WebHotspots wrote 100% of the html you see. The html is saved as a separate html document, whose contents you may copy & paste into your html page. (Note that the shape here is defined as "RECT" so that the browser knows to look for only two coordinates for the entire shape.)

The image to be mapped is opened in the imagemapping program, whose controls allow you to use your mouse to define areas, and to use the keyboard to associate desired location links. The program then will write the required html and create the associated map definition. You may map an entire parent image, or only desired pieces and parts.

The order of appearance of the defined areas in a MAP tagset is of no consequence - the browser will "read" the entire instruction between the tags <MAP> and </MAP> before interpreting their meanings.

Each map you make will have its own name. You make up the names as you go - the only restriction is that the same name may not be used for more than one map on any one page. (Careful - you may wind up restricted to one name usage per site if you're using Javascript page construction.)

You can make different maps for the same image, each map with a different name. For example, a kid's human anatomy pages may have one image, but maps devoted to the senses, the limbs, the major organs, etc - all separate, but defined from the same parent image.

It is not necessary to list the image and the associated map(s) in the same typed location in the html. As long as both appear on the same html page, the browser will "find" and associate them properly.

Finally, note that the coordinate numbers tell the browser how far to move to the right and how far down from upper left (in pixels) for each of the defined area points. If you later process the image to change its dimensions, the map coordinate numbers will no longer be accurate - you'd create a new map to suit the resized image.

~ GROUPING GRAPHICS ~

Here's a trick we've not seen published anywhere!

Graphics may be grouped in tables (covered elsewhere), or they may be simply listed, one entry after another, in the html. Multiple-entry groups can yield some strange placements in the browser, so we'll cover a couple of tips. Please refer to the discusson of white space on the Tables page in the section titled "Gaining Control", following item 7.

These tips will not work for images placed within tables, but will help to solve problems encountered with a group of images intended to "string out" across the width of a page.

Let's say that you had created a number of link buttons (as .gif format images) which you want to group side-by-side or vertically...we'll call them butn1.gif, butn2.gif, butn3.gif, and butn4.gif. All will have the standard arrangement of a link (<A HREF="...">) and image (<IMG SRC="...">) specification.

[ Please open your browser window width so that the four
"buttons" immediately following are in one line, left to right. ]

Pretend that you actually have 10 buttons. They'll line up differently on various users' browsers because their monitors may range from 14" to 21", and system resolutions may vary from 600x480 all the way to 1280x1024. What you want is for the buttons to line up in the least number of rows, but for all to remain visible on the screen...so you'll let 'em float and line up according to whatever the users' system abilities may be....users may see 10 in a row, two rows of 5, etc.

(Incidentally, don't try to correlate our source html for the samples with all that's written below....with no reference links, we can't quite force every occurence.)

Let's say further that, as "da boss o´ dis page", you have the reasonable expectation of exercising html control over spacing between the buttons and whether or not they touch one another.

Finally, for this example, we'll say you want the buttons centered on the page (and not in a table.)

Here's a possible html listing:
<P ALIGN=CENTER>
<A HREF="#place1"><IMG SRC="butn1.gif">place1</A>
<A HREF="#place2"><IMG SRC="butn2.gif">place2</A>
<A HREF="#place3"><IMG SRC="butn3.gif">place3</A>
<A HREF="#place4"><IMG SRC="butn4.gif">place4&l;t/A>

The html is nicely broken into four editable lines, and there are no break (<BR>) commands, so we'd expect it to line up just as shown above...right? Well, here's what it really will do:

Oooops...we got spaces between em! You guessed it...that's browser-induced white space, and it occurs because there's a carriage return between the html entries for each of the buttons. We're victims, because we get that space whether we want it or not. Thankfully, there's a way out of it while still retaining editability and control.

It would be hard to read and edit if all of that html were bunched up as follows (think about its being 10 or 15 buttons, and you'll get the idea):

<P ALIGN=CENTER><A HREF="#place1"><IMGSRC="butn1.gif"></A><A HREF="#place2"><IMG SRC="butn2.gif"></A><A HREF="#place3"><IMG SRC="butn3.gif"></A><A HREF="#place4&quo;t><IMG SRC="butn4.gif"></A>

...so we need to find a way to break it up. Besides, although it might work to run it together in one instance, uncontrolled breaks may cause it to fail in another. What we're looking for is control!

To have no spaces, there must be no breaks between the tags for each image, ie, in the structure....
<A HREF=....SRC="butn1.gif"></A><A HREF=.....SRC="butn2.gif"></A>,
...there can be no break between the first </A> and the second <A HREF= , and so forth.

The trick is to deliberately place a break exactly where correct html coding already has one, yet retain enough of each line to keep it editable. Let's just break it at the second "<A HREF=" right between the "A" and the "HREF" where there's already a required space (and similarly between 2nd & 3rd, and 3rd & 4th), and type it in the word processor like this:

<P ALIGN=CENTER>
<AHREF="#place1"><IMG SRC="butn1.gif"></A><A
HREF="#place2"><IMG SRC="butn2.gif"></A><A
HREF="#place3"><IMG SRC="butn3.gif"></A><A
HREF="#place4"><IMG SRC="butn4.gif"></A>


Bingo! .....desired arrangement, and easy-to-edit html.

If you want space between them, then you may specify it in the image tag with the attribute <HSPACE="x">. Here's the same html with HSPACE=5:

<P ALIGN=CENTER>
<AHREF="#place1"><IMG SRC="butn1.gif" HSPACE=5 ></A><A
HREF="#place2"><IMG SRC="butn2.gif" HSPACE=5 ></A><A
HREF="#place3"><IMG SRC="butn3.gif" HSPACE=5 ></A><A
HREF="#place4"><IMG SRC="butn4.gif " HSPACE=5 ></A>

Add VSPACE="x" for vertical space control.

Now, use your mouse to "grab" the right margin of your browser, and narrow the screen until the example set immediately above shows three buttons in the first row and one in the second. (This simulates having lots of buttons in more than one row.)

...Nuts...we still have a problem, because now the two rows aren't vertically aligned! BUT...the fix is easy with the "real trick" in this discussion. What's happened is that there's more white space (in the last row only) because the browser doesn't "know" where this "paragraph" of images ends. Just add </P> to the very end, NOT dropped to the next line, as usual, and it'll straighten right out!...

Summary:

Reference: See discussion of graphics presentation in tables.

[ home ]