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) Some wavelengths are discrete colors (e.g.,
  red720 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
Color Definitions

• Color is defined by three qualities that affect
  the color we see
• hue -- the NAME of the color (e.g., red, blue,
  green, yellow, etc.)360 degrees (Photoshop
  colorpicker 180 to 180 degrees)
• saturation or chroma -- the color's dullness or
  vividness0-100
• value or brightness -- the color's relative
  lightness or darkness 0-100

7
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.

8
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

9
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).
• You can use the scientific version of the
  computer calculator to convert numbers to hex
  codes.
• Web safe colors use these RGB or Hex codes

10
Color Names, RGB Codes, and Hexadecimal Values
11
Perceptions of Color

• Colors affect hormonal balances
• An elevated red wavelength increases hormone
  production and raises blood pressure
• An elevated blue wavelength depresses hormone
  production and lowers blood pressure
• Memory Color -- color is learned by experience
• We see the color we have learned to see, which
  means we may perceive an orange we see in dim
  light as the same color as the orange we see in
  bright light
• Symbolic colors - Red usually means what?
• Color has different meanings in different
  cultures

12
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
• To use different colors than these, modify the
  attributes of the page, defined within the
  tag.
• 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 textcolor linkcolor vlinkcolor
  alinkcolor

13
Body Tag color attributes

• bgcolor attribute sets the background color
• 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 defines the color of an active
  hyperlink (the color of the link as it is clicked
  by the user)
• link"006666" vlink"993399" alink"ff3333

14
Inserting a Background Image

• The background attribute allows an image file for
  the background of a Web page.
• The syntax for inserting a background image is
  .
• URL is the location and filename of the graphic
  file you want to use for the background of the
  Web page.
• for example, to use an image named bricks.gif
  as a background image, you would use the tag
  

15
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

16
Web Page Backgrounds
17
Entering Clouds.jpg as the Background
18
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
• Web page authors are encouraged to use other
  approaches, such as cascading style sheets, to
  format the appearance of Web pages.
• Most of the deprecated tags and attributes are
  still supported by the major browsers.

19
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

20
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

21
A Transparent Image File
This figure shows a transparent image file.
22
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.

23
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
• Animation is geared to the computer time clock
  they all jump together and are distracting

24
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

25
Alignment Options
This figure describes the possible values of the
align attribute.
26
Effects of the Align Attribute
This figure shows the effect of each alignment
options on text surrounding the image.
27
Using the hspace and vspace Attributes
28
Controlling Image Size

• Another set of attributes for the tag are
  the height and width attributes.
• Height and width attributes instruct the browser
  to display an image at a specific size.
• The height and width attributes can be used to
  increase or decrease the size of the image on a
  Web page.
• The syntax for setting the height and width
  attributes is widthvalue
• value is the height and width of the image either
  in pixels or as a percentage of the pages height
  and width

29
Controlling Image Size Continued

• To decrease the size of an image, use an image
  editing application to reduce the file size and
  dimensions of the image.
• Changing the size of the image within the
  tag does not affect the file size, it makes the
  image look smaller improving the performance of
  the Web page.
• When a browser encounters an inline image, it
  calculates the image size and then uses this
  information to format the page.
• If the dimension is included with an image, the
  browser displays the image faster.

30
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

31
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.

32
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

33
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

34
Creating Image Maps in HTML

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

35
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.
36
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.
• There are two types of image maps server-side
  image maps and client-side image maps.

37
Linking an Image to Different Web Pages
This figure shows how links will work.
38
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.

39
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

40
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

41
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.

42
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

43
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

44
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

45
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

46
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

47
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

48
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

49
An Example of a Polygonal Hotspot
50
An Example of thePolygonal Hotspot Code
51
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

52
Image Map and Hotspots
This figure shows an example of an image map and
hotspots.
53
Image Map and Hotspots Continued
54
Summary

• Used color and inline images in HTML.
• Discussed how Web browsers use color (palette).
• Learned how to use color names and color values.
• Learned how to use safety color palettes and
  safe colors.
• Defined GIF, JPEG, and PNG image formats.

55
Summary

• 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.