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

Tutorial 3 – Designing a Web PageWorking 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 <Body> tag • <BODY BGCOLOR=“#rrggbb”> document here </BODY>

Color Schemes for Web Page • <BODY> 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. <body bgcolor=“#FFC088”> • 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) • <BODY TEXT=“#rrggbb” LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">Document here</BODY>

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

Background Attribute 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. • An Image file can be used as a background <BODY BACKGROUND=“images/lite2.gif">Document here</BODY>

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 • <IMG SRC=ImageName> • Attributes • HEIGHT • WIDTH • <IMG SRC=CoffeeCup.jpg HEIGHT=100 WIDTH=65> • 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: • <IMG SRC=“image file” ALT=“alternate text”> • <IMG SRC=“coffeecup.jpg” ALT=“coffee cup”>

Images as Hyperlinks • Inline images can be used as hyperlinks • Format: • <A HREF=“target destination”><IMG SRC=“image filename” ALT=“alternate text”></A> • <A HREF=“hotlist.html”><IMG SRC=“BarHotlist.gif” Alt=“Hot List”></A>

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: • <IMG SRC=“coffeecup.jpg” BORDER=6 ALT=“Coffee Cup”> • 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: • <IMG SRC=“image file” VSPACE=value HSPACE=value>

Tips for Color and Images • Rule of thumb – total graphics 40-50 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)

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