Images and Color in Web Pages

1
Images and Colorin Web Pages

• WWW 131
• Week 6

2
Two Major Types of Images

• Inline images
• Automatically appear on the Web page
• Graphic file name is part of HTML code
• External images
• Not directly displayed on the Web page
• Downloaded file viewed in an image editor or
  viewer
• And there is also a background image for the
  entire page. This is discussed below.

3
Graphical Browsers sped Web Growth

• Of course, inline images are the ones most used
  in the World Wide Web.
• In fact, the availability of the first graphical
  browser able to show images in 1993 is what
  fueled the Webs explosive growth

4
Graphical Browsers sped Web Growth
5
Graphical Browsers sped Web Growth

• The first graphical web browser was originally
  named Mosaic
• It was developed at the University of Illinois
  (Urbana)s National Center for Supercomputing
  Applications by a team led by Mark Andreesen
• The name was changed later to Netscape
• One excellent history of the birth of the
  graphical Web is Michelle Slatallas Speeding the
  Net The Inside Story of Netscape and How it
  Challenged Microsoft a fun read!
• Jamie Zawinski, one of the lead developers at
  Netscape in the 90s, maintained a colorful
  series of posts describing his time there. You
  can read these at http//www.jzawinski.org/gruntle
  . Caution though probably not suitable for
  reading at work!

6
File Formats

• Practially all images on the Internet are in one
  of three major file formats
• GIF
• Graphics Interchange Format
• JPG or JPEG
• Joint Photographic Expert Group
• PNG
• Portable Network Graphic
• Other formats
• .TIFF (extremely large, detailed photographs)
• .BMP (usually desktop images)

7
.GIF

• Recommended for small images with few colors and
  blocks of the same color
• Developed by CompuServe
• Can have transparency!
• Uses LZW compression
• Compresses large blocks of the same color
• Indexed color
• Custom palette of
• Interlaced Format Option

8
.JPG

• The best format for photographs and images with
  subtle tones of color
• Compresses by combining some subtle shades into
  one shade

9
.PNG

• Developed in 1995 with the intention of replacing
  GIF files
• Also can have transparency
• Based on a public-domain version of .gif
  technology that results in 10-30 file size
  reduction

10
The Tag

• The tag is not paired, so we write it as
  
• Has a src attribute which specifies both
• file name of the image to be shown and
• file path of the image file
• The src attribute must be present if an image is
  to be displayed without it, the browser does not
  know what image is to be shown, or where that
  image file is located!

11
The src Attribute

• Think of the URL value given to the src attribute
  as similar to the URL we give the href attribute
  of the tag
• The src attribute may take a relative URL
• A relative URL is used when the image file is in
  the same directory as the HTML document
  displaying it!

12
The src Attribute

• The src attribute may take more complex relative
  URLs

13
The src Attribute

• Finally, the src attribute may also take an
  absolute URL as its value
• mages/snowstrip.GIF /

14
The Tag

• One way to space images place the tag
  within and tags

15
Other attributes of the Tag

• But is preferred to position images use the other
  attributes of the tag
• height
• width
• align
• hspace
• vspace
• alt picture of a cup (deprecated)

16
Other Attributes

• width (pixels), height (pixels)
• These specify size of graphic as shown on screen
• hspace (pixels), vspace (pixels)
• specify space open on each side, top/bottom of
  graphic
• align (position of graphic on page)
• Left or right
• align (position of graphic on line)
• Default is bottom of text (See pp. ____ for
  values)
• alt (Text shown when graphics turned off)

17
Tag Syntax

• For a graphic in a line of textimages/tasten2.gif
• align top
• width 100 height 100
• hspace 20 vspace 20
• alt Abigails Restaurant
• Logo /

18
Tag Syntax

• To wrap text next to a graphicimages/tasten2.gif
• align right
• width 100 height 100
• hspace 20 vspace 20
• alt Abigails Restaurant
• Logo /

19
Images as Hyperlinks

• Images can be made into clickable links by
  nesting the tag within the opening and
  closing anchor tags
• This is commonly done to provide a link back to a
  sites home page (see next slide)

20
Images as Hyperlinks Examples

21
Images as Hyperlinks

• Images as hyperlinks are also used to display
  small versions of an image (thumbnail images),
  where the thumbnail links to the full size
  version of the same image

22
Images as Hyperlinks

• One page where thumbnail images lead to larger
  versions of the same image is http//www.ashotapa
  rt.com/archives.html

23
Images as Hyperlinks Resizing Images

• This may be done in two ways
• 1. by setting the height and width of the image
  to smaller sizes
• height 20 alt logo /

24
Images as Hyperlinks Resizing Images

• 2. by re-setting the images size properties in
  an image processing software program, then
  displaying the smaller version in the hyperlink

25
Images as Hyperlinks

• One drawback to using images as hyperlinks is
  that browsers automatically place a border around
  them.
• The border will be the color of hyperlinks in
  that page, usually blue.
• The border can be distracting and unattractive.

26
Images as Hyperlinks

• While we can set the border from size 1
  (smallest) to 6 (largest), it is best to set the
  border to 0, to make any border invisible
• border 0 /

27
Background Images

• A less-employed type of image is the image that
  is the background for the entire page
• While these used to be quite popular, their use
  has diminished with the greater design
  possibilities that have come with cascading style
  sheets.

28
Background Images

• This can look nice when the background and text
  complement one another
• http//www.w3schools.com/html/tryit.asp?filenamet
  ryhtml_back_good
• And some do not

29
Background Images

• Check to be sure that your text is readable over
  the background image!