Image Review

1
Image Review

• Week 7

2
What are images used for?

• Images can be used as
• Backgrounds
• Horizontal rules
• Pictures
• Graphics

3
Why are Images used?

• They make the page more interesting and colorful
• Images can be used to clarify a point
• They can be used as a link to other web pages or
  sites
  

4
Image as a Background

• An image can be placed in the background of the
  web site
  

5
Two Classes of Images

• What are the two classes of images
• Inline
• Inline images display on the web page together
  with the text.
  
• External
• External images are stored separately from the
  web page and are displayed when a visitor clicks
  a link to display them.
  

6
Three Image formats

• .gif
• Graphics Interchange Format
• .jpg or .jpeg
• Joint Photographic Expert Group
• png
• Portable Network Graphic

7
Image TagRemember. . .

• It is a one-sided tag (no closing tag)
• src attribute specifies the filename (and path)of
  the image
  
• Other attributes height, width, alt,
  (deprecated) align, hspace, vspace
  
• For spacing place the tag within and
  tags
  

8
(No Transcript)
9
What will these Image attributes accomplish?

• alt
• text shown when graphics turned off
• width(pixels), height(pixels)
• specify size of graphic
• hspace(pixels), vspace(pixels)
• specify space open on each side, top/bottom of
  graphic
  
• align(position of graphic on page)left or right
• text will wrap around image with image appearing
  to the right or left of text
  
• align(position of graphic on line) top, middle,
  bottom
  
• text will be aligned in different positions on
  the line/default is bottom of text
  

10
Images as Links

• Images can be clickable links
• A small thumbnail can link to the full size
  graphic
  
• width20 height20 altlogo /

11
Horizontal Rules

• /
  
• (10 depth, 80 width of screen, centered on width
  of screen,
  
• Noshade creates a solid bar with no shading
• Images can also be used as a horizontal rule

12
(No Transcript)
13
For Images try these sites!

• Associated Press Photos
• Accessible only from Oakton
• http//ap.accuweather.com/apphoto/index.htm
• Life Beyond Yahoo
• http//servercc.oakton.edu/wittman/find/images.ht
  m
  
• http//www.mediabuilder.com/
• Free use for email and personal web pages
• www.ecn.bgu.edu/users/gas52r0/Jay/art.html
• www.iconbazaar.com