Graphics

1
Graphics

• Use color on web pages
• Create and format horizontal lines on web pages
• Decide when to use the most appropriate types of
  graphics on web pages
• Use the image tag to add graphics to web pages
• Use images as backgrounds on tables and web pages
• Use images as hyperlinks
• Find both free and fee-based sources of graphics
• Follow recommended web design guidelines when
  using graphics on web pages

2
Using Color on Web Pages

• Monitors display color as intensities of red,
  green, and blue
• RGB Color
• The values of red, green, and blue vary from 0 to
  255.
• Hexadecimal numbers (base 16) are used to
  represent these colors.

3
Hexadecimal Color Values

• Hex value pairs range from 00 to FF
• Three hex value pairs are used to describe a RGB
  color
• 000000 black FFFFFF white
• FF0000 red 00FF00 green
• 0000FF blue

4
Web ColorPalette

• A collection of 216 colors that display the same
  on both the Mac and PC platforms.
• Hex values 00, 33, 66, 99, CC, FF
• See the Color Chart at http//webdevfoundatins.net
  /color/index.hm

5
XHTMLColor and the tag

• bgcolor Attribute
• Configures the background color of the web page
• text Attribute
• Configures the color of the text on the web page
• link Attribute
• Configures the color of the hyperlinks on the web
  page
• vlink Attribute
• Configures the color of the visited hyperlinks on
  the web page
• alink Attribute
• Configures the color of the active hyperlinks on
  the web page

6
XHTML tag

• Horizontal Rule tag
• Stand alone tag
• Used to place a horizontal line on the page
• Design Hint when tempted to use an tag,
  try adding more blank space around the web page
  elements often this will result in a less
  cluttered, better designed web page.
• Common Attributes
• width, color, align

7
Questions

• 1. Is it reasonable to try to code a web page
  that looks exactly the same on every browser and
  every platform? Explain your answer.
• 2. A web page is coded with the background color
  set to 003300 and the text color set to 333300.
  When the page is displayed in a browser, the
  hyperlinks display fine but the text does not
  show up. Why did this happen? What do you suggest
  to correct this?
• 3. True or False. Using the Web Safe Color
  Palette guarantees that your web page colors look
  identical on every single browser and operating
  system.

8
Types of Graphics

• Graphic (still images) types commonly used on web
  pages
• GIF
• JPG
• PNG

9
GIF

• Graphics Interchange Format
• Best used for line art and logos
• Maximum of 256 colors
• One color can be configured as transparent
• Can be animated
• Uses lossless compression
• Can be interlaced

10
JPEG

• Joint Photographic Experts Group
• Best used for photographs
• Up to 16.7 million colors
• Use lossy compression
• Cannot be animated
• Cannot be made transparent

11
PNG

• Portable Network Graphic
• Support millions of colors
• Support multiple levels of transparency
• Support interlacing
• Use lossless compression
• Combines the best of GIF JPEG
• Browser support is growing

12
XHTML tag

• The image tag
• Used to place graphics on a web page
• src Attribute
• used to indicate the file name of the graphic
• alt Attribute
• Used to configure a text description
• height Attribute
• Used to configure the height of the image in
  pixels
• width Attribute
• Used to configure the width of the image in pixels

height100 width100 /
13
XHTML Alignment

• Vertical Alignment
• tag align Attribute

14
XHTML Moreattributes

• Horizontal Alignment
• Adding Vertical Space
• vspace Attribute
• Adding Horizontal Space
• hspace Attribute

15
Image Links

• To create an image link use an anchor tag to
  contain an image tag

Home
height"19" width"85" alt"Home" /
16
OrganizingYour Web

• height100 width200/

Place images in their own folder
17
XHTML More attributes

• background attribute
• Used to configure a background image for a web
  page

18
Questions

• 1. Describe the attribute (and corresponding
  value) used on an image tag to configure an image
  called coffee.gif to float on the right side of a
  paragraph of text, allowing the text to wrap
  around it. Code sample XHTML to demonstrate
  this.
• 2. Describe the attribute (and corresponding
  value) used on an image tag (for coffee.gif) to
  configure the text following the image to display
  vertically next to the center of the image rather
  than next to the bottom of the image. Code sample
  XHTML to demonstrate this.
• 3. True or False. When coding image links, use
  configure the image tag with border"0" to avoid
  the default blue border.

19
Images More! XHTML tag

• No Break tag
• Used when you might be using images in a
  navigation bar and you would like to keep the
  images in a horizontal row no matter what the
  screen resolution settings are or browser window
  size is on your visitor's computer.
• place image tags here

20
Using a Table to Format Images

• first image tag goes here
• second image tag goes here
• third image tag goes here
• fourth image tag goes here

21
Thumbnail Image

• A small image used to link to a larger version of
  that image.
• Examples?

22
ImageMaps

• tag
• Defines the map
• tag
• Defines a specific area on a map
• Can be set to a rectangle, circle, or polygon
• href Attibute
• shape Attribute
• coords Attribute

23
Sample Image Map

• coords"24, 188, 339, 283" altfishing boat" /
• Michigan" width"416" height"350" /

24
Sourcesfor Graphics

• create them yourself using a graphics application
• download them from a free site
• purchase and download them from a graphics site
• purchase a graphics collection on a CD
• take digital photographs
• scan your photographs
• scan your drawings
• hire a graphic designer to create graphics

25
PopularGraphics Applications

• Adobe Photoshop
• JASC Paintshop Pro
• Adobe Macromedia Fireworks

26
Guidelinesfor Using Images

• Consider image load time
• Reuse images
• Weigh image size with image quality
• Resolution
• Specify dimensions
• Gamma

27
Images and Accessibility

• Don't rely on color alone.
• Some visitors may have color perception
  deficiencies. Use high contrast between
  background and text color.
• Avoid using the colors red and brown next to each
  other.
• These colors are difficult for individuals with
  the most common color perception deficiency to
  differentiate.
• Provide a text equivalent for non-text elements.
• Use the alt attribute on your image tags.
• If your site navigation uses image links, provide
  simple text links at the bottom of the page.

28
Questions

• 1. Search for a site that uses image links to
  provide navigation. List the URL of the page.
• What colors are used on the image links?
• If the image links contain text, is there good
  contrast between the background color and letters
  on the image links?
• Would the page be accessible to a visitor who is
  sight-challenged?
• How have accessibility issues been addressed?
• Is the alt attribute used to describe the image
  link?
• Is there a row of text links in the footer
  section of the page?
• Answer the questions above and discuss your
  findings.

29

• 2. When configuring an image map, describe the
  relationship between the image, map, and area
  tags.
• 3. True or False. Save your images using the
  smallest file size possible.