jqjacobs.net/web
Creating a Web Page -- Color and Graphics
|
Color Basics | Adding Color | Backgrounds | Image Basics | Inserting Graphics | Image Maps Color in HTML DocumentsColor is displayed by the client monitor, and some monitors are limited to displaying, or may be set to display, only 256 colors (8-bit color). Additionally, system software and browsers can reserve up to 40 colors for their own uses. This leave 216 colors for the 8-bit monitor to select from to display your page with millions of possible colors offered. The 8-bit monitor therefore needs to dither the colors (combine available colors to reproduce yours). The results can be less than satisfactory. Fortunately the number of 8-bit monitors in use is decreasing, and now represents a very small fraction of clients. If you want to assure that your pages reproduce on all monitors with the same quality result, you must choose among the 216 colors in the "browser safe palette." Many software tools now present the option of conversion to Web safe palettes, or use the browser safe palette as the default. In Dreamweaver, the browser safe palette is the default and an HTML Picker is available. In new versions of Photoshop you can save for the Web. Color is coded either by names or by hexadecimal representation of the red, green and blue components of the color. There are 16 color names recognized by all browsers. Other colors can also be specified by name, but this capability is not uniformly supported by browsers. The easiest solution at this time is to always use hexadecimal representation. Hexadecimal numerical representation allows two digit representation of the ten-based numbers from 0 to 255, and therefore permits representing millions of colors using only six digits in 8-bit (simple text or HTML) files. The characters A, B, C, D, E, and F are substituted for the ten base numbers 10, 11, 12, 13, 14, and 15. In hexadecimal equivalency 9 is 09, 10 is 0A, 11 is 0B, 15 is 0F, 16 is 10, 17 is 11, 31 is 1F, 32 is 20, 255 is FF, etc., with the first digit representing the number of 16s and the second digit representing the number of ones. White is FFFFFF (255, 255, 255 in RGB triplet notation) and black is 000000. Color coding in HTML is preceded by the pound sign. Hence red is designated by #FF0000 (255, 0, 0 in RGB), and blue is encoded by #0000FF. To convert an RGB value divide the RGB numbers by 16 and convert the result to the first hexadecimal value. Then convert the remainder to the other value. Remember, the count begins with zero. Here are the conversions to the browser safe settings: 00 = 000, 33 = 051, 66 = 102, 99 = 153, CC = 204, and FF = 255. Note that the named colors are not necessarily browser safe.
Adding ColorThe most basic coding to add color to a page is the default text color. Like the link colors, this code is an attribute of the <body> element. The body tag in a page were the background is white and the text is black reads as follows:
The above tag would use the browser default colors, or the colors specified in the browser preferences, for the link colors. The following <body> tag also specifies custom link colors. It is always advisable to specify the link colors to ensure that they are appropriate for the page background and font colors.
You can override the text color specified in the <body> tag by using an inline font color attribute elsewhere in the page. The code for the colored text in the previous line, which applies the color attribute to a <font> tag, reads as follows:
Color can also be added to other elements, such as table borders, table cell backgrounds, as seen above. The first line of code to follow is the above table element with its attributes, including bordercolor. The second line is a cell tag <td> with a background color attribute and a width attribute.
Using BackgroundsNot only can colors be used as background, but images can also be used. A small image file will tile the entire web page. Some background images are only one pixel tall. In this page a 96 x 96 pixel JPEG file named "grey.jpg" is used as the background. It is located in the images folder. Here is the code for the <body> tag specifying only the background file:
Image files can also be used as backgrounds in tables or table cells. It is important that images in the background not detract from reading the page. If all the text is framed by tables with a colored table background, then a more interesting background image can be used in the page surrounding the table. Numerous background images can be found free online. Image BasicsInline images can enhance Web pages. Images are really worth a thousand works in the cyber world. Images take a lot more file space than does text. A 32 x 32 pixel bitmap image contains over 1000 points of color. If the file is a true color image it literally is about the same size as a 1000 word simple text file. Because image file size and download time is a concern with the Web, the Internet supports only certain file types, .png, .gif, and .jpg. The Graphics Interface Format (GIF) files are limited to displaying only 256 colors, to allow 8-bit coding of the color positions in the image. They are not, however, limited to 256 specific colors. You can have 256 shades of one color or another in a GIF file. However their use is limited to images with only a few colors. GIF files are preferred for logos, icons, transparent text files, and other uses with limited colors. There are two GIF formats, GIF 87 and GIF 89a. The latter supports transparencies, animation, and interlacing. Interlaced images appear blurry and resolve as the file downloads, instead of downloading a line at a time. Interlacing increases the file size. Transparent GIFs have the advantage of displaying only the image you wish to convey, without a surrounding background color. The following image is a transparent GIF:
Using the transparent feature minimizes the file size to the essential image. Not all graphics programs support creating transparent GIFs. Animated GIFs are actually a series of images that display like a movie, one after another in rapid succession. Animated GIF software allows the artist to determine the number of frames and the rate the animation plays at. Animated GIFs increase in file size according to the number of images used. Because animated GIFs cannot be turned off, they can be annoying to the person trying to read the page content. Joint Photographers Expert Group (JPEG) format files can use the 16.7 million colors (256 x 256 x 256) available on the electronic color palette. Their compression algorithm results in file sizes comparable to GIF files. JPEG format allow the creator to control the degree of compression, and the consequent file size and quality. Inserting GraphicsThe transparent logo for the Superstition Mountain Campus used above is inserted in the page with the following code:
It is a separate paragraph, which is center aligned. The image source (<img src=...>) element has width and height attributes. The file, "horizon.gif," is in the images folder. For Braille readers, and because some Web users will specify that their browser not download images, you might wish to place a substitute text attribute with the image tag. This is accomplished with the <alt> attribute. In the following code the image tag uses the <alt> tag to specify the text "Campus Logo" as the alternative to displaying the image.
The image is 20 pixels high by 56 pixels wide. It has a horizontal space of 6 pixels. The align="left" attribute places it at the left margin. Notice that the horizontal space applies to both sides of the image. The vertical space is set to 1 pixel and the <alt> text is the word "inline." You can also specify an image size other than the actual size of the file. Other alignment tags specify where text should align on an image. This one
is to the bottom:
Images can also have borders. The default border color is the text color, or
if the image is a link, the link color. The following image,
This time the
Image MapsImage maps use areas of images as links to an array of URL. A typical example is a map of the United States used on the National Parks Web page. Clicking on a state links to a page about National Parks in that state. A museum might use its floor plan to create links to different galleries. There are two kinds of image maps, server-side and client-side. Server-side image maps are not supported by all browsers, and, because the client computer must communicate with the server, they can be slower. Client-side maps are included in the page HTML. Since they do not require CGI scripting they are easier to create. This image has eight linked areas, called hot spots. Hot spots can have rectangular, circular or polygon forms. Each shape is used in this image map. Pixels in images are positively numbered from the upper-left corner, with the x axis along the horizontal and the y axis along the vertical. The image, the code for inserting the image and the image map code follows. The actual links differ from the presented code because the linked pages are located in a separate folder.
The following image, a screen capture taken in Dreamweaver, illustrates the hotspots and how they are revealed in the HTML editor.
The <usemap> tag applies the map with the corresponding name to the image. Each linked area in the map has its own <area> tag between the <map> and </map> tags. Shape and coordinates are attributes of the areas, as are their links. The first area is circular. The center of the circle area is at coordinates x=28, y=126 and the radius is 25 pixels. One x,y coordinate set and a radius are needed to map a circle. The second area in the map, the sky in the upper left corner is rectangular, 86 pixels wide and 35 pixels high. Only two x,y coordinates are needed to describe rectangles. The sky rectangle is nested in the corner, beginning at pixel 0,0. The opposite corner is at 86,35. The polygons include two with four sides and one with five sides. For polygons the coordinates are a series of points, in series along its perimeter. Move your mouse over the image and notice the links change in the status bar. Compare them with the code. To create an image map you can use software like Dreamweaver, which supports the entire process with mouse clicks and the properties dialog box. If you do not have such a tool you might need to use a graphics tool, like Photoshop, to identify the coordinates. In Photoshop set the rulers preferences to pixels and display the info window. You can then locate the mouse pointer in the image and read the coordinates of any point. Image maps should be in the same page as the image. Not all browsers support external image maps. Server-side image maps use different tags and require special programs on the server, in the CGI-bin directory. Useful LinksOptimizing Web Graphics from www.webreference.com includes more useful links. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
images can have text wrap around them, and they can be placed inline in a sentence.
In either case you might wish to have some space between the image and the text.
This is accomplished using horizontal spacing <hspace> and vertical spacing
<vspace> tags. Text wrapping is accomplished with the align attribute
(="left" or ="right"). The image is always against one or
the other margin. Here follows the tag for the GIF image at the beginning of
this paragraph:
,
has no spacing, but it does have a 2 pixel border. Notice that the border is
black. This image, 
|
|
|||||
|
|
|
|
|
|
|