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

Tutorial 3 – Designing a Web Page

Working with Color & Graphics

Mrs. Wilson

Overview

• Using color will make your web pages:visually interestingeye-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 nameby 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 valuesBlack TextWhite or Gray backgroundHypertext 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

background color

text color

hyperlink color

previously followed hyperlink color

active hyperlink color

Background Attribute

• An Image file can be used as a background

<BODY BACKGROUND=“images/lite2.gif">Document here</BODY>

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

• RememberImage should not detract from pageDon’t use large images (>20K), load time

is longImage 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:serifsans-serifmonospacecursive 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 browsersGIF – 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>

• AttributesHEIGHTWIDTH <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 ImageIncrease or decrease the size of imageHEIGHT=value, WIDTH=value in pixelsBetter use graphic Software to alter sizeHEIGHT & WIDTH does not change file sizeBrowser calculates the image size before

displaying itBetter 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 imageAlign Left, Right, Center

• Can align text with textEx. 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 imageVSPACE – space above and below the imageHSPACE – space left and right of imageMeasured 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

Documents

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