Tutorial 3 – Designing a Web Page Working with Color & Graphics
description
Transcript of 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)
<FONT> Tags—Specific/Generic
• The <font> 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 <font> tag is:<font size=“size” color=“color” face=“face”> text </font>
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
<font size=4 color=teal face=Comic Sans>text goes here</font>
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: <font face=“Arial, Helvetica, sans-serif”> Arcadium</font>
Font Size
• The SIZE property of the <font> 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 <font> 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)