The use of color on the Web

1
The use of color on the Web

• colors.ppt

2
Objectives

• Learn how HTML handles color
• Understand basic color theory
• Background image on a Web page
• Define colors for a Web page and for specific
  characters
• Different image formats
• Control the placement and appearance of images on
  a Web page
• Work with client-side image maps

3
How HTML handles Color

• Color makes your web pages
• visually interesting
• eye-catching for the reader
• Conveys style purpose of web site to viewer
• HTML is a text-based language, -- thus colors are
  defined as text inside tags.
• HTML identifies a color in one of two ways
• by the color values, written in hexadecimals
• by the colors name not consistent in all
  browsers so less reliable way

4
Basic color theory what is color?

• Color is a sensation of light that is experienced
  through sight (on the retina)
• Colors are continually changing -- different
  people perceive colors differently
• colors look different when the light changes
• colors look different when they are put next to
  other colors
• Light generates color as waves of light energy
  with different wavelengths measured in nanometers
  (nm)

5
Computer screens use Additive Color light rays

• Primary colors of light Red, Green Blue
• Secondary colors of light mixed from the Primary
  colors Yellow, Cyan Magenta
• Color mixes
• White equal wavelengths of Red Green Blue
• Yellow equal wavelengths of Red Green
• Cyan equal wavelengths of Blue Green
• Magenta equal wavelengths of Red Blue
• Black the absence of color
• Color mixed in unequal proportions yields other
  colors
• Yellow-Green 2 parts Green 1 part Red

6
RGB (Red, Green, Blue) Codes (called triplets in
book)

• Software programs, such as Web browsers and
  graphics programs, define color mathematically.
• The intensity of each of three colors (RGB) is
  assigned a number (called an RGB code) from 0
  (absence of the color) to 255 (fully saturated
  color).
• In this way, 2553, or more than 16.7 million,
  distinct colors can be defined.
• Each color is represented by an RGB code (called
  a triplet in the textbook), based on the strength
  of its Red, Green, and Blue components.

7
RGB Code Examples

• Whites RGB code 255,255,255
• red, green, and blue are equally mixed at the
  highest intensity.
• The higher the RGB codes, the lighter the color
• Yellows RGB code 255,255,0
• equal mixture of red and green with no presence
  of blue.
• Blacks RGB code 0,0,0
• the absence of color in additive color
• The lower the RGB codes, the darker the color

8
Hexadecimal Values

• HTML requires color values be entered as
  hexadecimals.
• A hexadecimal is a number based on base-16
  mathematics rather than base-10 mathematics that
  we use every day.
• in base 10 counting, you use combination of 10
  characters (0 through 9) to represent numerical
  values.
• hexadecimals include six extra characters A (for
  10), B (for 11), C (for 12), D (for 13), E (for
  14), and F (for 15).
• Web safe colors use these RGB or Hex codes

RGB 51 HEX 33 ? (163) 48 3 51
9
Color Names, RGB Codes, and Hexadecimal Values
10
HTML Code for using Color in a Web Page

• In most cases, the default browser scheme
  involves
• black text on a white or gray background
• hypertext links highlighted in purple and blue
• The tag can be used to indicate the colors
  on a Web page.
• The syntax for controlling a pages color scheme
  through the tag is style"color993300 background-colorffff99"
• background-color green text-decoration
  none"About

11
Background Image

• In choosing a background image, you should
  remember
• use an image that will not detract from the text
  on the Web page, making it hard to read
• do not use a large image file (more than 20
  kilobytes)
• large and complicated backgrounds will increase
  the time it takes a page to load
• be sure to take into consideration how an image
  file looks when it is tiled in the background
• 
  

12
Web Page Backgrounds
13
Deprecated Tags

• The tag and the attributes of the
  tag have both been deprecated by the W3C.
• deprecated means that they are outdated by newer
  methods
• Most of the deprecated tags and attributes are
  still supported by the major browsers.
• Helvetica, sans-seriffont-size 0.8em"

14
Images

• File formats (or compression formats) supported
  by most Web browsers
• GIF Compuserve Graphics Interchange Format
• JPEG Joint Photographic Experts Group
• PNG - Portable Network Graphics new not
  widely used because doesnt work with older
  browsers
• Use primarily GIFs and JPEGs
• Balance trade-offs between an interesting and
  attractive page and download time

15
Transparent GIFs

• A transparent color is a color from the image
  that is not displayed when the image is viewed in
  an application.
• the browser displays the image surrounded by
  whatever is on the page background.
• PhotoShop helps you create transparent GIFS in
  the Save for Web window.
• Can define color mask that is same color as Web
  page to lessen the jaggies (jagged edges) on
  the transparent GIF

16
A Transparent Image File
This figure shows a transparent image file.
17
Animated GIFs

• An animated GIF is several images that are
  displayed one after the other in rapid succession
  saved as one GIF file.
• ImageReady has a convenient animation palette
  can animate different layers in the image
• Animagic, which comes with the book will generate
  animated gifs
• GIF construction set
• Lots of other programs (Premiere, Fireworks) also
  generate animated GIFS.

18
Animated GIFs

• Animated GIF are larger than static GIF images.
• can greatly increase the size of a Web page.
• Animated GIFs are limited to 256 colors and can
  use transparent colors.
• Usability critics say use a maximum of ONE per
  page and expect it to attract all the attention

19
Controlling Image Placement and Size

• When designing a Web page, you may want to
  control the image placement and size.
• The align attribute can control the alignment of
  an image with the tag.
• Better way is to use a layout table more
  control
• The syntax for the align attribute is srcURL alignalignment
• URL is the location and filename of the graphic
  file
• alignment indicates how you want the graphic
  aligned in relation to the surrounding text

20
Effects of the Align Attribute
This figure shows the effect of each alignment
options on text surrounding the image.
21
Controlling Vertical and Horizontal Space

• To increase the horizontal and vertical space
  around an image use the hspace and vspace
  attributes.
• The syntax is hspacevalue
• hspace (horizontal space) attribute indicates the
  amount of space to the left and right of the
  image.
• vspace (vertical space) attribute controls the
  amount of space above and below the image

22
Using the hspace and vspace Attributes
23
Using the alt Attribute

• The alt attribute specifies text to display in
  place of an inline image.
• The syntax for specifying alternate text is srcURL altalternate text

24
General Tips for Workingwith Color and Images

• The primary purpose of a Web page is to convey
  information.
• If an image adds visual interest to the Web page,
  include it.
• Be aware that overusing graphics can make a Web
  page difficult to read and cumbersome to display.

25
Reduce the Size of Web Pages

• Strive to make your Web page quick and easy to
  retrieve.
• The total size of an image on a Web page should
  be no more than 40 to 50 kilobyte. There are
  several ways to achieve this
• use an image editing application
• experiment with different graphic format types
• use thumbnails-reduced versions of your images
• reuse images
• provide an alternate, text-only version of the
  Web page

26
Manage Your Colors

• Color can add a lot to a Web page, it can also
  detract from it.
• Make sure to have enough contrast between the
  text and background.
• do not place dark text on a dark background
• do not place light text on a light background
• Color is handled differently on different
  browsers
• test Web pages on different browsers and monitors

27
Dithering

• Dithering is when the colors in an image are
  converted to a fixed palette.
• To completely eliminate dithering, use the Safety
  Palette.
• the Safety Palette, also referred to as the
  browser-safe palette, web palette, or 216 color
  palette, is a collection of 216 colors that
  display consistently on different browsers and
  operating systems.
• Using the Safety Palette, images will appear the
  same to all users regardless of the browser being
  used.
• Given the growth of 24-bit (millions of colors)
  color systems, this is rapidly becoming less of
  an issue.

28
Image Dithering
This figure shows dithered images can sometimes
appear grainy.
29
Creating Image Maps in HTML

• When designing a Web page, you may want to create
  an image that links to other Web pages.

30
An Example of a Image Map
This figure is an example of a park map that
visitors can easily find their way to all of the
different attractions by clicking on the
image. For example, when a user clicks the
section of the map on roller coaster rides a page
describing the roller coaster ride is displayed.
31
Understanding Image Maps

• To use a single image to access multiple targets,
  you must set up hotspots within the image.
• A hotspot is a defined area of the image that
  acts as a hypertext link.
• When a user clicks within a hotspot, the
  hyperlink is activated.
• Hotspots are defined through the use of image
  maps, which list the positions of all hotspots
  within an image.

32
Linking an Image to Different Web Pages
This figure shows how links will work.
33
Client-Side Image Maps

• A client-side image map is inserted in an image
  map into the HTML file.
• The browser locally processes the image map.
• Because all of the processing is done locally,
  you can easily test Web pages.
• More responsive than server-side maps.
• The browsers status bar displays the target of
  each hotspot.
• Older browsers do not support client-side images.
• http//www.csupomona.edu/lpreiser/courses/cis311/
  labs/tutorial03/

34
Defining a Client-Side Image Map

• Create the tag that defines the different
  hotspots on the image as follows
• hrefURL targetwindow
• . . .
• mapname is the name you give the image map
• shape is the type of hotspot (rectangle, circle,
  or polygon)
• coordinates are the locations of points that
  define the shape
• URL is the location of the linked page
• window is the name of a secondary browser window

35
Defining a Client-Side Image Map Continued

• If you want to open the linked page in a
  different window. You can have multiple
  tags within each tag, enabling you to have
  several hotspots for each image map.
• Once the image map is created, add the usemap
  attribute to the tag for the inline image,
  as follows
• mapname is the name you give the image map
  defined in the tag

36
Defining Image Map Hotspots

• Use a special program that determines the image
  map coordinates.
• Most image map programs generate the coordinates
  for hotspots, as well as, the necessary HTML code.

37
Defining Image MapHotspots Continued

• Within the tag, enter the code for the type
  of hotspot(s) and the coordinates.
• The syntax for a rectangular hotspot is
• x_right, y_lower hrefURL targetwindow
• x_left, y_upper are the coordinates of the
  upper-left corner of the rectangle
• x_right, y_lower are the coordinates of the
  lower-right corner

38
The shape Attribute

• The shape attribute refers to the shape of a
  hotspot. There are three possible values
• rect for a rectangular hotspot
• circle for a circular hotspot
• poly or Polygon for irregularly shaped
  polygon hotspots

39
The coords Attribute

• The coords attribute specifies the location of
  the hotspot.
• The values entered depend on the shape of the
  hotspot.
• Coordinates are expressed as a points distance
  in pixels from the left and the top edges of the
  image.
• for example, the coordinates (123,45) refer to a
  point 123 pixels from the left edge and 45 pixels
  down from the top

40
The href Attribute

• Use the href attribute to enter the location of
  the page opened by the hotspot.
• The target attribute can specify the name of a
  secondary browser window in which to open the
  linked page.
• Use the value nohref in place of a URL to
  prevent the hotspot from activating a hypertext
  link.
• this is a useful technique when first developing
  image maps, without hypertext links in place

41
Creating a Rectangular Hotspot

• Two points define a rectangular hotspot
• the upper-left corner
• the lower-right corner
• A sample code for a rectangular hotspot is
• hrefwater.htm
• coordinates are entered as a series of four
  numbers separated by commas
• HTML expects that the first two numbers represent
  the coordinates for the upper-left corner of the
  rectangle, and the second two numbers indicate
  the location of the lower-right corner
• the hotspot is a hypertext link to water.htm

42
Creating a Circular Hotspot

• A circular hotspot is defined by the location of
  its center and its radius.
• A sample code for a circular hotspot is
• hrefkarts.htm
• coordinates are (307, 137), and it has a radius
  of 66 pixels.
• the hotspot is a hypertext link to karts.htm

43
Creating a Polygonal Hotspot

• To create a polygonal hotspot, you enter the
  coordinates for each vertex in the shape.
• A sample code for a polygonal hotspot is
• ,370,225,230,225,230,60 hrefrides.htm
• coordinates are for each vertex in the shape.
• the hotspot is a hypertext link to rides.htm

44
An Example of a Polygonal Hotspot
45
An Example of thePolygonal Hotspot Code
46
The usemap attribute

• The usemap attribute tells the browser the name
  of the image map to associate with the inline
  image.
• The syntax for adding the usemap attribute is
  
• mapname is the name assigned to the name
  attribute in the tag

47
Image Map and Hotspots
This figure shows an example of an image map and
hotspots.
48
Summary

• Used color and inline images in HTML.
• Learned how to use color names and color values.
• Defined GIF, JPEG, and PNG image formats.
• Learned how to control the size and placement of
  images.
• Aligned text with images and images in tables.
• Created a client-side image map and clickable
  image.