Tutorial 3 – Designing a Web Page Working with Color & Graphics Mrs. Wilson

Overview Using color will make your web pages:  visually interesting  eye-catching for the reader HTML is a text-based language, requiring you to define your colors in textual terms. HTML identifies a color in one of two ways:  by the color’s name  by the color values

16 Basic Color Names

Limitations Using the basic color names allows you to accurately display them across different browsers and operating systems. The list of only 16 colors is limiting to Web designers.  in response, Netscape and Internet Explorer began to support an extended list of color names

Partial List of Extended Names

Color by Value To have more control and more choices, specify colors using color values. A color value is a numerical expression that precisely describes a color.

WYSIWYG When you work with desktop publishing applications, you typically make color choices without much difficulty due to the WYSIWYG graphical user interface those programs employ.

Color Hexadecimal (HEX) code Any color can be thought of as a combination of three primary colors: red, green, and blue. By varying the intensity of each primary color, you can create almost any color and any shade of color. This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen.

Easier Way to Color Each color is represented by a triplet of numbers, called an RGB triplet, based on the strength of its Red, Green, and Blue components. Colors are assigned from 0 to 255.  White has a triplet of (255,255,255), indicating that red, green, and blue are equally mixed at the highest intensity.  Yellow has the triplet (255,255,0) because it is an equal mixture of red and green with no presence of blue.  The RGB system permits 16.7M distinct colors.

Color Names, RGB Triplets, and Hexadecimal Values

Color Scheme for Web Page Default values  Black Text  White or Gray background  Hypertext link is Blue, Visited link is Purple Modify tag  document here

Color Schemes for Web Page tag  bgcolor attribute sets the background color the value of color will be either one of the accepted color names or the color’s hexadecimal value if you use the hexadecimal value, you must preface the hexadecimal string with the pound symbol (#) and enclose the string in double or single quotation marks i.e.  text attribute controls text color  link attribute defines the color of hypertext links  vlink attribute defines the color of links that have been visited by the user  alink attribute determines the color of an active hyperlink (the color of the link as it is clicked by the user) Document here

EXAMPLE TO TRY background color text color hyperlink color previously followed hyperlink color active hyperlink color

Background Attribute An Image file can be used as a background Document here This figure shows that when a browser retrieves your image file, it repeatedly inserts the image into the background, in a process called tiling, until the entire display window is filled up.

Background Images Remember  Image should not detract from page  Don’t use large images (>20K), load time is long  Image should be seamless (don’t show boundaries and grids when tiled)

Tags—Specific/Generic The tag allows you to specify the color, the size, and the font to be used for text on a Web page and it has THREE properties. The syntax for the tag is: text  size attribute allows you to specify the font size of the text  color attribute allows you to change the color of individual characters or words  face attribute specifies a particular font for a section of text text goes here

Giving it a New Face! The face attribute is used to specify a particular font for a section of text. The face attribute overrides the browser’s font choice. You must specify a font that is installed on the user’s computer or use one of the following five generic font names:  serif  sans-serif  monospace  cursive  fantasy

Generic Names

Plan Ahead with Fonts The face attribute allows you to specify a list of potential font names.  the browser tries to use the first font in the list; if it fails, it will try the second font, and so on. A generic font name should be listed last for the browser to fall back on.  for example to display the word “Arcadium” in a sans-serif, enter the following HTML tag: Arcadium

Font Size The SIZE property of the tag allows you to specify the font size of the text. SIZE value can be in either absolute or relative terms. You can have a text size of 2 by stating SIZE=2 OR you can increase the font size relative to the surrounding text by entering SIZE=+2 in the tag

Spot Color You can use the tag to add spot color. For example,  This is an example of spot color. Spot color is add

Stop here! Let’s explore serif and sans serif fonts. Visit several websites and develop a list of 5 serif fonts and 5 san serif fonts. Find the SPECIFIC names.

Image Formats Two major file formats supported by browsers  GIF – Graphics Interchange Format Most common on web Displays 256 colors  JPEG – Joint Photographic Experts Group Extension JPG or JPEG Full 16.7 million colors Usually smaller files than GIF Can control amount of file compression – affects image quality

Images Basic Tag  Attributes  HEIGHT  WIDTH   These attributes may not work in all browsers, best to use correct size images

Size of the Image  Increase or decrease the size of image  HEIGHT=value, WIDTH=value in pixels  Better use graphic Software to alter size  HEIGHT & WIDTH does not change file size  Browser calculates the image size before displaying it  Better to specify size so browser does not need to calculate it

Alternate Text for Image  Some WWW browsers are primarily text-only like Lynx  Can turn off image loading if slow connections  Use an alternate tag displays specified text instead of image  A Necessity for visually impaired users  Example:

Images as Hyperlinks Inline images can be used as hyperlinks Format: 

Aligning Images Can separate text from image  Align Left, Right, Center Can align text with text  Ex. Top, Bottom, Middle …. View examples on Lecture link page

Image Borders BORDER attribute can be set to non- zero, whether or not used as hyperlink Helps image stand out Format:  See examples on Lecture link page

Space Around Image Increase the vertical and horizontal space around the image  VSPACE – space above and below the image  HSPACE – space left and right of image  Measured in Pixels Syntax: 

Tips for Color and Images  Rule of thumb – total graphics KB  Use graphic software to reduce image size  Reduce number of colors (>256 GIF)  Experiment with GIF & JPEG formats  Use thumbnails  Reuse your images – browser already has a copy of file  Provide alternate text for all images  Use the ALT, HEIGHT, & WIDTH properties

More Tips on Color & Images  Have enough contrast between text and background  Avoid clashing colors  View page in multiple browsers  Text different color depth to determine if dithering appears  Dithering is where increased color depth is approximated, may appear grainy  Use 256 colors to control dithering  Eliminate dithering by using the Safety Palette (211 colors that works on all browsers)